s&p. desenvolupament d'una aplicació per a la gestió de menús i...

64
S&P Sal i Pebre Desenvolupament d’una aplicació per a la gestió de menús i receptes Memòria de Projecte Final de Grau Grau de Multimèdia Desenvolupament d’aplicacions interactives Autor: Sònia Pujol Fajardo Consultor: Kenneth Capseta Nieto Professor: Carlos Casado Martinez 11-06-2018

Upload: others

Post on 21-Sep-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

SampPSal i Pebre

Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptes

Memograveria de Projecte Final de GrauGrau de Multimegravedia

Desenvolupament drsquoaplicacions interactives

Autor Sogravenia Pujol Fajardo

Consultor Kenneth Capseta NietoProfessor Carlos Casado Martinez

11-06-2018

Aquest Treball Final de Grau i tota la documentacioacute estan subjectes a la llicegravencia

Creative Commons Reconeixement-NoComercial-SenseObraDerivada 40 Internacional

(CC BY-NC-ND 40)

Sou lliure de

COMPARTIR - copiar i redistribuir el material en qualsevol mitjagrave i format

Amb els termes seguumlents

RECONEIXEMENT - Heu de reconegraveixer lrsquoautoria de manera apropiada pro-porcionar un enllaccedil a la llicegravencia i indicar si heu fet algun canvi Podeu fer-ho de qualsevol manera raonable perograve no drsquouna manera que suggereixi que el llicenciador us doacutena suport o patrocina lrsquouacutes que en feu

NO COMERCIAL - No podeu utilitzar el material per a finalitats comercials

SENSE OBRA DERIVADA - Si remescleu transformeu o creeu a partir del material no podeu difondre el material modificat

No hi ha cap restriccioacute addicional - No podeu aplicar termes legals ni mesures tecnologravegiques que restringeixin legalment a altres de fer qualsevol cosa que la lli-cegravencia permet

Termes i condicions de la llicegravencia

Al meu fill lrsquoEkain per fer-me veure les coses importants de la vida a la meva parella en Mikel per tot el suport i tota la paciegravencia al llarg drsquoaquests anys drsquoestudi al meu germagrave en Xavi per ensenyar-me cada dia motivar-me i per fer-me pensar i als meus pares per ser-hi sempre

AbstractAquest Treball Final de Grau (TFG) planteja el disseny i el desenvolupament drsquouna aplicacioacute mogravebil en la qual usuaris amateurs podran gestionar diferents menuacutes setmanals i receptes drsquouna manera senzilla i intuiumltiva

Lrsquoaplicacioacute SampP (Sal i Pebre) preteacuten reduir el temps futur que lrsquousuari necessitaragrave per elaborar els menuacutes setmanals quotidians de manera que com meacutes informacioacute hi hagi emmagatzemada a lrsquoapli-cacioacute menys feina tindragrave lrsquousuari per tal de dur a terme la gestioacute

La falta de temps lliure en quegrave em trobo per lrsquoobligacioacute de realitzar totes aquelles prioritats ne-cessagraveries mrsquohan dut a la temagravetica drsquoaquest TFG I si puc reduir el temps de gestioacute de tot allograve que envolta el proceacutes de lrsquoalimentacioacute

En aquest sentit aquest projecte eacutes un primer pas per assolir una aplicacioacute que abraci gran part drsquoaquesta proceacutes eacutes a dir no estem parlant drsquoun projecte amb punt final sinoacute meacutes aviat de la base drsquouna aplicacioacute amb diferents projeccions de futur mitjanccedilant les quals srsquoestendran les funcionalitats de lrsquoaplicacioacute i srsquoampliaran els objectius inicials drsquoaquest projecte

Pel desenvolupament de lrsquoaplicacioacute srsquoutilitzen tecnologies relacionades amb plataforma Flash per les seves capacitats multimegravedia multiplataforma i multi dispositiu Mitjanccedilant lrsquoIDE (Integrated develo-pment environment o entorn integrat de desenvolupament) FlashDevelop64 es combinaragrave el Llen-guatge de Programacioacute Orientat a Objectes ActionScript3 amb continguts SWF creats amb lrsquoAdobe Animate CC (anteriorment Adobe Flash Professional)

Paraules clauRecepta receptari menuacute cuina aplicacioacute mogravebil disseny centrat en lrsquousuari plataforma Flash

Abstract (english version)Sometimes I believe that there are not enough hours in the day I have many things to do different priorities in life but not enough time Although I try to make the most of the day there are moments when simply thinking of the meals I should prepare during the week for me and my family take a great deal of time Time I could spend doing something else And that got me thinking is there anything I can do to reduce the time I spend organizing those meals

That idea led me to the subject of this project

This Final Degree Project (FDP) I am presenting is the design and development of an application program where users can organize different menus and recipes in a simple and intuitive way Salt amp Pepper (SampP) Applicationrsquos objective is to reduce the time people employ preparing weekly menus Therefore the more information loaded into the application the easier to manage the operations for the user and the faster one can organize the meals so that people will be able to save time for other things

In this sense this project is but the first step to create an application that will cover and help with the alimentation process It is the basis of a program that holds different prospects for the future which will extend the applicationrsquos functionalities and will expand the original goals of this project

For the development of this application (Adobe) Flash Platform technologies are used because of their multimedia multiplatform and multi-device capability By means of IDE (Integrated Development Environment) FlashDevelop64 Object-Oriented Programming Language ActionSript3 is combined with SWF contents created with Adobe Animate CC (previously Adobe Flash Professional)

KeywordsRecipe recipe book menu cuisine mobile application user-centered design Flash platform

Notacions i Convencions

Tiacutetols Arial 20 negreta alineacioacute esquerra Seccions Arial 13 negreta alineacioacute esquerra

Subseccions Arial 11 negreta cursiva alineacioacute esquerra

Cos Arial 11 regular justificacioacute esquerra

Peu figures i taules Arial 8 regular justificacioacute centrada

Annotacions de peu de pagravegina Arial 8 regular justificacioacute eacutesquerra

1 Introduccioacute 92 Descripcioacute de lrsquoaplicacioacute 103 Objectius del projecte 12

31 Objectius principals 1232 Objectius secundaris 12

4 Metodologia 135 Planificacioacute 14

51 Fites i dates clau 1452 Diagrama de Gantt 15

6 Proceacutes de treball 167 Arquitectura de lrsquoaplicacioacute 17

71 Client-Servidor 1772 Model-Vista-Controlador 17

8 Anagravelisi pregravevia 1881 Anagravelisi de producte 1882 Anagravelisi de lrsquoaudiegravencia 1883 Anagravelisi de mercat 20

9 Disseny de la Base de Dades 2491 Diagrama Entitat-Relacio (E-R) 2492 Model Relacional 25

11 Arquitectura de la informacioacute 26111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI 26112 Continguts de lrsquoaplicacioacute RECEPTARI 27113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte) 29114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte) 30115 Abre de continguts 31116 Prototips Lo-Fi Wireframes 32117 Prototips Hi-Fi Mockups 34

12 Avaluacioacute de la usabilitat 38121 Modificacions inicials 38122 Evaluacioacute heuriacutestica 38123 Avaluacioacute final 40

13 Projeccioacute a futur 41131 Correccioacute funcionalitats bagravesiques 41132 Millores de lrsquoaplicacioacute 41133 Ampliacioacute de lrsquoaplicacioacute 42

14 Conclusions 44Annex I Lliurables del projecte 45Annex II Codi font 46Annex III Modelatge drsquousuari 49Annex IV Llibre drsquoestil 52Annex V Guia drsquousuari 57Annex VI Bibliografia 63

Iacutendex

Figures

Iacutendex de figures

Figura 1 Diagrama de Gantt 15Figura 2 Model-Vista-Controlador 17Figura 3 Captura de pantalla Easy Menu 20Figura 4 Captura de pantalla Recetario 21Figura 5 Captura de pantalla Planifood 22Figura 6 Diagrama Entitat-Relacioacute 24Figura 7 Arbre de continguts 31Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos) 32Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute) 32Figura 10 Prototip Baixa Fidelitat (Editar Recepta) 32Figura 11 Prototip Baixa Fidelitat (Cercar Recepta) 33Figura 12 Prototip Baixa Fidelitat (Recepta) 33Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute) 33Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari) 34Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute) 34Figura 16 Prototip Alta Fidelitat (Editar Recepta) 35Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta) 35Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes) 36Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes) 36Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute) 37Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute) 37

9

1 Introduccioacute

Sempre he donat importagravencia a dur una alimentacioacute tant sana i equilibrada com variada i plaent I per tant la gestioacute que comporta pensar i elaborar els menuacutes setmanals adients i la recerca de recep-tes necessagraveries per dur-los a terme ha sigut una prioritat en la meva vida

Perograve des del moment en quegrave vaig decidir tornar a estudiar i cursar aquest Grau Multimegravedia de la Universitat Oberta de Catalunya (UOC) compaginat amb una jornada laboral de 8 hores les meves prioritats personals es van veure modificades ja que em vaig trobar amb grans dificultats a lrsquohora de gestionar certs aspectes per manca de temps

Ara amb lrsquoarribada del meu fill he tornat a donar gran importagravencia a lrsquoalimentacioacute perograve no tinc la possibilitat de dedicar-hi el temps necessari i de cap manera el temps que hi dedicava fa uns anys Aquest fet mrsquoha dut a la temagravetica drsquoaquest TFG Quegrave passaria si hagueacutes guardat tota la informacioacute sobre la gestioacute de menuacutes i recerca de receptes que vaig realitzar durant tant de temps

Si beacute avui puc comptar amb lrsquoexperiegravencia que anat guanyant amb els anys mitjanccedilant una aplicacioacute com la que es desenvolupa en aquest projecte (amb la qual es gestionen i srsquoemmagatzemen fagravecil-ment receptes i menuacutes setmanals) podria tenir tota la feina feta

He pogut comprovar que a casa no som els uacutenics que ens trobem en aquest tipus de situacioacute ja que la societat en quegrave vivim comporta una manca de temps generalitzada Per tant aquesta podria ser una aplicacioacute molt pragravectica per a gestionar lrsquoalimentacioacute de les llars i facilitar el dia a dia a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

10

2 Descripcioacute de lrsquoaplicacioacuteSampP en la seva totalitat eacutes una aplicacioacute mogravebil per a la creacioacute i gestioacute de receptes i menuacutes setma-nals dirigida especialment a amateurs del sector i que preteacuten reduiumlr el temps de gestioacute de lrsquousuari (facilitant-ne lrsquouacutes i els serveis) en funcioacute de les dades emmagatzemades en la base de dades i la realitzacioacute automagravetica del llistat de la compra

Principalment lrsquousuari pot crear i guardar les seves progravepies receptes i menuacutes o localitzar-ne de ge-nerats per altres usuaris i utilitzar-los com a tal o modificar-los per adaptar-los a les seves progravepies necessitats

ReceptesPer a la creacioacute drsquouna nova recepta lrsquousuari parteix drsquouna base de dades drsquoaliments drsquoon ha de seleccionar els ingredients necessaris (fruita verdura carn peix espegravecies) i indicar-ne les mesu-res adients En cas que lrsquoingredient no existeixi a la base de dades srsquohi inclouragrave automagraveticament i drsquoaquesta manera tot usuari colmiddotlabora en lrsquoampliacioacute i millora drsquoaquesta

Posteriorment es prossegueix amb lrsquoelaboracioacute de la recepta En aquest punt lrsquousuari ha drsquointroduir pas per pas el procediment a seguir per a dur a terme la recepta En un futur com a millora de futur si hi ha algun ingredient introduiumlt anteriorment el qual no ha estat utilitzat en lrsquoelaboracioacute lrsquoaplicacioacute alertaragrave a lrsquousuari de lrsquoingredient no utilitzat

En acabat srsquoha drsquointroduir una segraverie de caracteriacutestiques principals el tiacutetol de la recepta el nombre de comensals la colmiddotleccioacute a la qual pertany i una valoracioacute per indicar si es tracta drsquouna recepta saludable1

Finalment lrsquousuari teacute la possibilitat drsquoafegir una imatge identificativa de la recepta i se li ha drsquoassig-nar un tipus de privacitat a escollir entre PUacuteBLICA i PRIVADA La privacitat puacuteblica permet lrsquouacutes de la recepta per tots els usuaris de lrsquoaplicacioacute i els autoritza a reutilitzar-la en una altra recepta o a apro-fitar-la com a plantilla per una nova recepta per poder incloure-hi modificacions en funcioacute de criteris propis (variacioacute de mides o ingredients diferents temps de coccioacute)2

Les receptes puacutebliques tenen la possibilitat de ser valorades pels usuaris que nrsquohagin fet uacutes per un cantoacute podran indicar si creuen que eacutes una bona recepta (mrsquoagrada)3 i per altra banda podran seleccionar-les com a preferides3 En un futur tambeacute haurien de poder valorar si es tracta drsquouna recepta saludable4

1 Aquest sistema de valoracioacute es realitzaragrave mitjanccedilant els criteris hipocalograverica calograverica hipercalograverica i quedaragrave representat mitjanccedilant un sistema drsquoetiquetatge verd groc i vermell respectivament

2 Les receptes derivades faran esmena i enllaccedilaran la recepta original i per tant a lrsquoautor drsquoaquesta

3 Afecta la posicioacute de les receptes en el motor de cerca

4 Drsquoaquesta manera srsquoatenuaragrave el resultat drsquouna possible valoracioacute poc objectiva de lrsquoautor

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

11

MenuacutesEls menuacutes soacuten setmanals i estagraven associats a un nuacutemero de setmana anual (en principi el nuacutemero de setmana per la qual srsquoha creat) i es visualitzen en format calendari Cada setmana es divideix diagraveriament en els 2 agravepats principals dinar i sopar amb els quals treballa lrsquousuari

Lrsquousuari escull el nombre de de plats que formaran part de cada agravepat (depenent dels costums progravepis) afegint o eliminant plats els quals srsquoemplenaran mitjanccedilant receptes progravepies o puacutebliques utilitzant el cercador En cas que el menuacute escollit tingui superioritat de plats etiquetats com a no saludables lrsquoaplicacioacute alerta a lrsquousuari de lrsquoeleccioacute drsquouna dieta hipercalograverica

En aquest cas un cop finalitzat el menuacute lrsquoaplicacioacute automagraveticament el definiragrave com a menuacute saluda-ble (o no) en funcioacute de les receptes utilitzades i lrsquousuari li atorgaragrave el tipus de privacitat dessitjada En cas que lrsquousuari no generi un nou menuacute sinoacute que nrsquoutilitzi un de puacuteblic de la base de dades aquest igual que succeeix amb les receptes podragrave valorar-lo io utilitzar-lo com a plantilla per poder modifi-car-ne alguns aspectes segons preferegravencies

CerquesTant la cerca de receptes com la cerca de menuacutes ja elaborats es du a terme a partir de diferents filtres a escollir per lrsquousuari en el cas de les receptes drsquoacord amb lrsquoautor el tipus de plat (colmiddotlec-cions) ingredients io nuacutemero de comenccedilals i en el cas dels menuacutes drsquoacord amb autor io el nuacutem de setmana

Llistat de compraLrsquoaplicacioacute realitzaragrave en funcioacute del menuacute setmanal el llistat de la compra el qual podragrave ser modificat per lrsquousuari segons conveniegravenciaPodragrave eliminar elements que ja tingui a casa o afegir-ne de nous ja siguin alimentaris o noLa funcioacutenalitat del llistat de compra srsquoampliaragrave oferint la possibilitat a lrsquousuari de ser gestionada per alguna empresa dedicada a la realitzacioacute de compres i enviament a domicili

Caracteriacutestiques tegravecniquesPer a dur a terme el projecte les tecnologies utilitzades estan relacionades amb la Plataforma Flash ja que aquesta plataforma eacutes avui en dia un referent en la creacioacute drsquoAplicacions Rich Media (ARM) gragravecies a les seves capacitats

bull Enfocament al suport de diferents mitjansbull Compatibilitat amb muacuteltiples plataformesbull Adaptacioacute drsquoexecucioacute en diferents dispositius

Mitjanccedilant lrsquoIDE FlashDevelop64 combinarem el Llenguatge de Programacioacute Orientat a Objectes ActionScript3 (seguint el patroacute Model-Vista-Controlador el qual manteacute un codi ordenat i estructurat) amb els arxius en format swf creats amb el programa Adobe Animate CC

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

Aquest Treball Final de Grau i tota la documentacioacute estan subjectes a la llicegravencia

Creative Commons Reconeixement-NoComercial-SenseObraDerivada 40 Internacional

(CC BY-NC-ND 40)

Sou lliure de

COMPARTIR - copiar i redistribuir el material en qualsevol mitjagrave i format

Amb els termes seguumlents

RECONEIXEMENT - Heu de reconegraveixer lrsquoautoria de manera apropiada pro-porcionar un enllaccedil a la llicegravencia i indicar si heu fet algun canvi Podeu fer-ho de qualsevol manera raonable perograve no drsquouna manera que suggereixi que el llicenciador us doacutena suport o patrocina lrsquouacutes que en feu

NO COMERCIAL - No podeu utilitzar el material per a finalitats comercials

SENSE OBRA DERIVADA - Si remescleu transformeu o creeu a partir del material no podeu difondre el material modificat

No hi ha cap restriccioacute addicional - No podeu aplicar termes legals ni mesures tecnologravegiques que restringeixin legalment a altres de fer qualsevol cosa que la lli-cegravencia permet

Termes i condicions de la llicegravencia

Al meu fill lrsquoEkain per fer-me veure les coses importants de la vida a la meva parella en Mikel per tot el suport i tota la paciegravencia al llarg drsquoaquests anys drsquoestudi al meu germagrave en Xavi per ensenyar-me cada dia motivar-me i per fer-me pensar i als meus pares per ser-hi sempre

AbstractAquest Treball Final de Grau (TFG) planteja el disseny i el desenvolupament drsquouna aplicacioacute mogravebil en la qual usuaris amateurs podran gestionar diferents menuacutes setmanals i receptes drsquouna manera senzilla i intuiumltiva

Lrsquoaplicacioacute SampP (Sal i Pebre) preteacuten reduir el temps futur que lrsquousuari necessitaragrave per elaborar els menuacutes setmanals quotidians de manera que com meacutes informacioacute hi hagi emmagatzemada a lrsquoapli-cacioacute menys feina tindragrave lrsquousuari per tal de dur a terme la gestioacute

La falta de temps lliure en quegrave em trobo per lrsquoobligacioacute de realitzar totes aquelles prioritats ne-cessagraveries mrsquohan dut a la temagravetica drsquoaquest TFG I si puc reduir el temps de gestioacute de tot allograve que envolta el proceacutes de lrsquoalimentacioacute

En aquest sentit aquest projecte eacutes un primer pas per assolir una aplicacioacute que abraci gran part drsquoaquesta proceacutes eacutes a dir no estem parlant drsquoun projecte amb punt final sinoacute meacutes aviat de la base drsquouna aplicacioacute amb diferents projeccions de futur mitjanccedilant les quals srsquoestendran les funcionalitats de lrsquoaplicacioacute i srsquoampliaran els objectius inicials drsquoaquest projecte

Pel desenvolupament de lrsquoaplicacioacute srsquoutilitzen tecnologies relacionades amb plataforma Flash per les seves capacitats multimegravedia multiplataforma i multi dispositiu Mitjanccedilant lrsquoIDE (Integrated develo-pment environment o entorn integrat de desenvolupament) FlashDevelop64 es combinaragrave el Llen-guatge de Programacioacute Orientat a Objectes ActionScript3 amb continguts SWF creats amb lrsquoAdobe Animate CC (anteriorment Adobe Flash Professional)

Paraules clauRecepta receptari menuacute cuina aplicacioacute mogravebil disseny centrat en lrsquousuari plataforma Flash

Abstract (english version)Sometimes I believe that there are not enough hours in the day I have many things to do different priorities in life but not enough time Although I try to make the most of the day there are moments when simply thinking of the meals I should prepare during the week for me and my family take a great deal of time Time I could spend doing something else And that got me thinking is there anything I can do to reduce the time I spend organizing those meals

That idea led me to the subject of this project

This Final Degree Project (FDP) I am presenting is the design and development of an application program where users can organize different menus and recipes in a simple and intuitive way Salt amp Pepper (SampP) Applicationrsquos objective is to reduce the time people employ preparing weekly menus Therefore the more information loaded into the application the easier to manage the operations for the user and the faster one can organize the meals so that people will be able to save time for other things

In this sense this project is but the first step to create an application that will cover and help with the alimentation process It is the basis of a program that holds different prospects for the future which will extend the applicationrsquos functionalities and will expand the original goals of this project

For the development of this application (Adobe) Flash Platform technologies are used because of their multimedia multiplatform and multi-device capability By means of IDE (Integrated Development Environment) FlashDevelop64 Object-Oriented Programming Language ActionSript3 is combined with SWF contents created with Adobe Animate CC (previously Adobe Flash Professional)

KeywordsRecipe recipe book menu cuisine mobile application user-centered design Flash platform

Notacions i Convencions

Tiacutetols Arial 20 negreta alineacioacute esquerra Seccions Arial 13 negreta alineacioacute esquerra

Subseccions Arial 11 negreta cursiva alineacioacute esquerra

Cos Arial 11 regular justificacioacute esquerra

Peu figures i taules Arial 8 regular justificacioacute centrada

Annotacions de peu de pagravegina Arial 8 regular justificacioacute eacutesquerra

1 Introduccioacute 92 Descripcioacute de lrsquoaplicacioacute 103 Objectius del projecte 12

31 Objectius principals 1232 Objectius secundaris 12

4 Metodologia 135 Planificacioacute 14

51 Fites i dates clau 1452 Diagrama de Gantt 15

6 Proceacutes de treball 167 Arquitectura de lrsquoaplicacioacute 17

71 Client-Servidor 1772 Model-Vista-Controlador 17

8 Anagravelisi pregravevia 1881 Anagravelisi de producte 1882 Anagravelisi de lrsquoaudiegravencia 1883 Anagravelisi de mercat 20

9 Disseny de la Base de Dades 2491 Diagrama Entitat-Relacio (E-R) 2492 Model Relacional 25

11 Arquitectura de la informacioacute 26111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI 26112 Continguts de lrsquoaplicacioacute RECEPTARI 27113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte) 29114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte) 30115 Abre de continguts 31116 Prototips Lo-Fi Wireframes 32117 Prototips Hi-Fi Mockups 34

12 Avaluacioacute de la usabilitat 38121 Modificacions inicials 38122 Evaluacioacute heuriacutestica 38123 Avaluacioacute final 40

13 Projeccioacute a futur 41131 Correccioacute funcionalitats bagravesiques 41132 Millores de lrsquoaplicacioacute 41133 Ampliacioacute de lrsquoaplicacioacute 42

14 Conclusions 44Annex I Lliurables del projecte 45Annex II Codi font 46Annex III Modelatge drsquousuari 49Annex IV Llibre drsquoestil 52Annex V Guia drsquousuari 57Annex VI Bibliografia 63

Iacutendex

Figures

Iacutendex de figures

Figura 1 Diagrama de Gantt 15Figura 2 Model-Vista-Controlador 17Figura 3 Captura de pantalla Easy Menu 20Figura 4 Captura de pantalla Recetario 21Figura 5 Captura de pantalla Planifood 22Figura 6 Diagrama Entitat-Relacioacute 24Figura 7 Arbre de continguts 31Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos) 32Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute) 32Figura 10 Prototip Baixa Fidelitat (Editar Recepta) 32Figura 11 Prototip Baixa Fidelitat (Cercar Recepta) 33Figura 12 Prototip Baixa Fidelitat (Recepta) 33Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute) 33Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari) 34Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute) 34Figura 16 Prototip Alta Fidelitat (Editar Recepta) 35Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta) 35Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes) 36Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes) 36Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute) 37Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute) 37

9

1 Introduccioacute

Sempre he donat importagravencia a dur una alimentacioacute tant sana i equilibrada com variada i plaent I per tant la gestioacute que comporta pensar i elaborar els menuacutes setmanals adients i la recerca de recep-tes necessagraveries per dur-los a terme ha sigut una prioritat en la meva vida

Perograve des del moment en quegrave vaig decidir tornar a estudiar i cursar aquest Grau Multimegravedia de la Universitat Oberta de Catalunya (UOC) compaginat amb una jornada laboral de 8 hores les meves prioritats personals es van veure modificades ja que em vaig trobar amb grans dificultats a lrsquohora de gestionar certs aspectes per manca de temps

Ara amb lrsquoarribada del meu fill he tornat a donar gran importagravencia a lrsquoalimentacioacute perograve no tinc la possibilitat de dedicar-hi el temps necessari i de cap manera el temps que hi dedicava fa uns anys Aquest fet mrsquoha dut a la temagravetica drsquoaquest TFG Quegrave passaria si hagueacutes guardat tota la informacioacute sobre la gestioacute de menuacutes i recerca de receptes que vaig realitzar durant tant de temps

Si beacute avui puc comptar amb lrsquoexperiegravencia que anat guanyant amb els anys mitjanccedilant una aplicacioacute com la que es desenvolupa en aquest projecte (amb la qual es gestionen i srsquoemmagatzemen fagravecil-ment receptes i menuacutes setmanals) podria tenir tota la feina feta

He pogut comprovar que a casa no som els uacutenics que ens trobem en aquest tipus de situacioacute ja que la societat en quegrave vivim comporta una manca de temps generalitzada Per tant aquesta podria ser una aplicacioacute molt pragravectica per a gestionar lrsquoalimentacioacute de les llars i facilitar el dia a dia a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

10

2 Descripcioacute de lrsquoaplicacioacuteSampP en la seva totalitat eacutes una aplicacioacute mogravebil per a la creacioacute i gestioacute de receptes i menuacutes setma-nals dirigida especialment a amateurs del sector i que preteacuten reduiumlr el temps de gestioacute de lrsquousuari (facilitant-ne lrsquouacutes i els serveis) en funcioacute de les dades emmagatzemades en la base de dades i la realitzacioacute automagravetica del llistat de la compra

Principalment lrsquousuari pot crear i guardar les seves progravepies receptes i menuacutes o localitzar-ne de ge-nerats per altres usuaris i utilitzar-los com a tal o modificar-los per adaptar-los a les seves progravepies necessitats

ReceptesPer a la creacioacute drsquouna nova recepta lrsquousuari parteix drsquouna base de dades drsquoaliments drsquoon ha de seleccionar els ingredients necessaris (fruita verdura carn peix espegravecies) i indicar-ne les mesu-res adients En cas que lrsquoingredient no existeixi a la base de dades srsquohi inclouragrave automagraveticament i drsquoaquesta manera tot usuari colmiddotlabora en lrsquoampliacioacute i millora drsquoaquesta

Posteriorment es prossegueix amb lrsquoelaboracioacute de la recepta En aquest punt lrsquousuari ha drsquointroduir pas per pas el procediment a seguir per a dur a terme la recepta En un futur com a millora de futur si hi ha algun ingredient introduiumlt anteriorment el qual no ha estat utilitzat en lrsquoelaboracioacute lrsquoaplicacioacute alertaragrave a lrsquousuari de lrsquoingredient no utilitzat

En acabat srsquoha drsquointroduir una segraverie de caracteriacutestiques principals el tiacutetol de la recepta el nombre de comensals la colmiddotleccioacute a la qual pertany i una valoracioacute per indicar si es tracta drsquouna recepta saludable1

Finalment lrsquousuari teacute la possibilitat drsquoafegir una imatge identificativa de la recepta i se li ha drsquoassig-nar un tipus de privacitat a escollir entre PUacuteBLICA i PRIVADA La privacitat puacuteblica permet lrsquouacutes de la recepta per tots els usuaris de lrsquoaplicacioacute i els autoritza a reutilitzar-la en una altra recepta o a apro-fitar-la com a plantilla per una nova recepta per poder incloure-hi modificacions en funcioacute de criteris propis (variacioacute de mides o ingredients diferents temps de coccioacute)2

Les receptes puacutebliques tenen la possibilitat de ser valorades pels usuaris que nrsquohagin fet uacutes per un cantoacute podran indicar si creuen que eacutes una bona recepta (mrsquoagrada)3 i per altra banda podran seleccionar-les com a preferides3 En un futur tambeacute haurien de poder valorar si es tracta drsquouna recepta saludable4

1 Aquest sistema de valoracioacute es realitzaragrave mitjanccedilant els criteris hipocalograverica calograverica hipercalograverica i quedaragrave representat mitjanccedilant un sistema drsquoetiquetatge verd groc i vermell respectivament

2 Les receptes derivades faran esmena i enllaccedilaran la recepta original i per tant a lrsquoautor drsquoaquesta

3 Afecta la posicioacute de les receptes en el motor de cerca

4 Drsquoaquesta manera srsquoatenuaragrave el resultat drsquouna possible valoracioacute poc objectiva de lrsquoautor

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

11

MenuacutesEls menuacutes soacuten setmanals i estagraven associats a un nuacutemero de setmana anual (en principi el nuacutemero de setmana per la qual srsquoha creat) i es visualitzen en format calendari Cada setmana es divideix diagraveriament en els 2 agravepats principals dinar i sopar amb els quals treballa lrsquousuari

Lrsquousuari escull el nombre de de plats que formaran part de cada agravepat (depenent dels costums progravepis) afegint o eliminant plats els quals srsquoemplenaran mitjanccedilant receptes progravepies o puacutebliques utilitzant el cercador En cas que el menuacute escollit tingui superioritat de plats etiquetats com a no saludables lrsquoaplicacioacute alerta a lrsquousuari de lrsquoeleccioacute drsquouna dieta hipercalograverica

En aquest cas un cop finalitzat el menuacute lrsquoaplicacioacute automagraveticament el definiragrave com a menuacute saluda-ble (o no) en funcioacute de les receptes utilitzades i lrsquousuari li atorgaragrave el tipus de privacitat dessitjada En cas que lrsquousuari no generi un nou menuacute sinoacute que nrsquoutilitzi un de puacuteblic de la base de dades aquest igual que succeeix amb les receptes podragrave valorar-lo io utilitzar-lo com a plantilla per poder modifi-car-ne alguns aspectes segons preferegravencies

CerquesTant la cerca de receptes com la cerca de menuacutes ja elaborats es du a terme a partir de diferents filtres a escollir per lrsquousuari en el cas de les receptes drsquoacord amb lrsquoautor el tipus de plat (colmiddotlec-cions) ingredients io nuacutemero de comenccedilals i en el cas dels menuacutes drsquoacord amb autor io el nuacutem de setmana

Llistat de compraLrsquoaplicacioacute realitzaragrave en funcioacute del menuacute setmanal el llistat de la compra el qual podragrave ser modificat per lrsquousuari segons conveniegravenciaPodragrave eliminar elements que ja tingui a casa o afegir-ne de nous ja siguin alimentaris o noLa funcioacutenalitat del llistat de compra srsquoampliaragrave oferint la possibilitat a lrsquousuari de ser gestionada per alguna empresa dedicada a la realitzacioacute de compres i enviament a domicili

Caracteriacutestiques tegravecniquesPer a dur a terme el projecte les tecnologies utilitzades estan relacionades amb la Plataforma Flash ja que aquesta plataforma eacutes avui en dia un referent en la creacioacute drsquoAplicacions Rich Media (ARM) gragravecies a les seves capacitats

bull Enfocament al suport de diferents mitjansbull Compatibilitat amb muacuteltiples plataformesbull Adaptacioacute drsquoexecucioacute en diferents dispositius

Mitjanccedilant lrsquoIDE FlashDevelop64 combinarem el Llenguatge de Programacioacute Orientat a Objectes ActionScript3 (seguint el patroacute Model-Vista-Controlador el qual manteacute un codi ordenat i estructurat) amb els arxius en format swf creats amb el programa Adobe Animate CC

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

Al meu fill lrsquoEkain per fer-me veure les coses importants de la vida a la meva parella en Mikel per tot el suport i tota la paciegravencia al llarg drsquoaquests anys drsquoestudi al meu germagrave en Xavi per ensenyar-me cada dia motivar-me i per fer-me pensar i als meus pares per ser-hi sempre

AbstractAquest Treball Final de Grau (TFG) planteja el disseny i el desenvolupament drsquouna aplicacioacute mogravebil en la qual usuaris amateurs podran gestionar diferents menuacutes setmanals i receptes drsquouna manera senzilla i intuiumltiva

Lrsquoaplicacioacute SampP (Sal i Pebre) preteacuten reduir el temps futur que lrsquousuari necessitaragrave per elaborar els menuacutes setmanals quotidians de manera que com meacutes informacioacute hi hagi emmagatzemada a lrsquoapli-cacioacute menys feina tindragrave lrsquousuari per tal de dur a terme la gestioacute

La falta de temps lliure en quegrave em trobo per lrsquoobligacioacute de realitzar totes aquelles prioritats ne-cessagraveries mrsquohan dut a la temagravetica drsquoaquest TFG I si puc reduir el temps de gestioacute de tot allograve que envolta el proceacutes de lrsquoalimentacioacute

En aquest sentit aquest projecte eacutes un primer pas per assolir una aplicacioacute que abraci gran part drsquoaquesta proceacutes eacutes a dir no estem parlant drsquoun projecte amb punt final sinoacute meacutes aviat de la base drsquouna aplicacioacute amb diferents projeccions de futur mitjanccedilant les quals srsquoestendran les funcionalitats de lrsquoaplicacioacute i srsquoampliaran els objectius inicials drsquoaquest projecte

Pel desenvolupament de lrsquoaplicacioacute srsquoutilitzen tecnologies relacionades amb plataforma Flash per les seves capacitats multimegravedia multiplataforma i multi dispositiu Mitjanccedilant lrsquoIDE (Integrated develo-pment environment o entorn integrat de desenvolupament) FlashDevelop64 es combinaragrave el Llen-guatge de Programacioacute Orientat a Objectes ActionScript3 amb continguts SWF creats amb lrsquoAdobe Animate CC (anteriorment Adobe Flash Professional)

Paraules clauRecepta receptari menuacute cuina aplicacioacute mogravebil disseny centrat en lrsquousuari plataforma Flash

Abstract (english version)Sometimes I believe that there are not enough hours in the day I have many things to do different priorities in life but not enough time Although I try to make the most of the day there are moments when simply thinking of the meals I should prepare during the week for me and my family take a great deal of time Time I could spend doing something else And that got me thinking is there anything I can do to reduce the time I spend organizing those meals

That idea led me to the subject of this project

This Final Degree Project (FDP) I am presenting is the design and development of an application program where users can organize different menus and recipes in a simple and intuitive way Salt amp Pepper (SampP) Applicationrsquos objective is to reduce the time people employ preparing weekly menus Therefore the more information loaded into the application the easier to manage the operations for the user and the faster one can organize the meals so that people will be able to save time for other things

In this sense this project is but the first step to create an application that will cover and help with the alimentation process It is the basis of a program that holds different prospects for the future which will extend the applicationrsquos functionalities and will expand the original goals of this project

For the development of this application (Adobe) Flash Platform technologies are used because of their multimedia multiplatform and multi-device capability By means of IDE (Integrated Development Environment) FlashDevelop64 Object-Oriented Programming Language ActionSript3 is combined with SWF contents created with Adobe Animate CC (previously Adobe Flash Professional)

KeywordsRecipe recipe book menu cuisine mobile application user-centered design Flash platform

Notacions i Convencions

Tiacutetols Arial 20 negreta alineacioacute esquerra Seccions Arial 13 negreta alineacioacute esquerra

Subseccions Arial 11 negreta cursiva alineacioacute esquerra

Cos Arial 11 regular justificacioacute esquerra

Peu figures i taules Arial 8 regular justificacioacute centrada

Annotacions de peu de pagravegina Arial 8 regular justificacioacute eacutesquerra

1 Introduccioacute 92 Descripcioacute de lrsquoaplicacioacute 103 Objectius del projecte 12

31 Objectius principals 1232 Objectius secundaris 12

4 Metodologia 135 Planificacioacute 14

51 Fites i dates clau 1452 Diagrama de Gantt 15

6 Proceacutes de treball 167 Arquitectura de lrsquoaplicacioacute 17

71 Client-Servidor 1772 Model-Vista-Controlador 17

8 Anagravelisi pregravevia 1881 Anagravelisi de producte 1882 Anagravelisi de lrsquoaudiegravencia 1883 Anagravelisi de mercat 20

9 Disseny de la Base de Dades 2491 Diagrama Entitat-Relacio (E-R) 2492 Model Relacional 25

11 Arquitectura de la informacioacute 26111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI 26112 Continguts de lrsquoaplicacioacute RECEPTARI 27113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte) 29114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte) 30115 Abre de continguts 31116 Prototips Lo-Fi Wireframes 32117 Prototips Hi-Fi Mockups 34

12 Avaluacioacute de la usabilitat 38121 Modificacions inicials 38122 Evaluacioacute heuriacutestica 38123 Avaluacioacute final 40

13 Projeccioacute a futur 41131 Correccioacute funcionalitats bagravesiques 41132 Millores de lrsquoaplicacioacute 41133 Ampliacioacute de lrsquoaplicacioacute 42

14 Conclusions 44Annex I Lliurables del projecte 45Annex II Codi font 46Annex III Modelatge drsquousuari 49Annex IV Llibre drsquoestil 52Annex V Guia drsquousuari 57Annex VI Bibliografia 63

Iacutendex

Figures

Iacutendex de figures

Figura 1 Diagrama de Gantt 15Figura 2 Model-Vista-Controlador 17Figura 3 Captura de pantalla Easy Menu 20Figura 4 Captura de pantalla Recetario 21Figura 5 Captura de pantalla Planifood 22Figura 6 Diagrama Entitat-Relacioacute 24Figura 7 Arbre de continguts 31Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos) 32Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute) 32Figura 10 Prototip Baixa Fidelitat (Editar Recepta) 32Figura 11 Prototip Baixa Fidelitat (Cercar Recepta) 33Figura 12 Prototip Baixa Fidelitat (Recepta) 33Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute) 33Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari) 34Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute) 34Figura 16 Prototip Alta Fidelitat (Editar Recepta) 35Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta) 35Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes) 36Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes) 36Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute) 37Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute) 37

9

1 Introduccioacute

Sempre he donat importagravencia a dur una alimentacioacute tant sana i equilibrada com variada i plaent I per tant la gestioacute que comporta pensar i elaborar els menuacutes setmanals adients i la recerca de recep-tes necessagraveries per dur-los a terme ha sigut una prioritat en la meva vida

Perograve des del moment en quegrave vaig decidir tornar a estudiar i cursar aquest Grau Multimegravedia de la Universitat Oberta de Catalunya (UOC) compaginat amb una jornada laboral de 8 hores les meves prioritats personals es van veure modificades ja que em vaig trobar amb grans dificultats a lrsquohora de gestionar certs aspectes per manca de temps

Ara amb lrsquoarribada del meu fill he tornat a donar gran importagravencia a lrsquoalimentacioacute perograve no tinc la possibilitat de dedicar-hi el temps necessari i de cap manera el temps que hi dedicava fa uns anys Aquest fet mrsquoha dut a la temagravetica drsquoaquest TFG Quegrave passaria si hagueacutes guardat tota la informacioacute sobre la gestioacute de menuacutes i recerca de receptes que vaig realitzar durant tant de temps

Si beacute avui puc comptar amb lrsquoexperiegravencia que anat guanyant amb els anys mitjanccedilant una aplicacioacute com la que es desenvolupa en aquest projecte (amb la qual es gestionen i srsquoemmagatzemen fagravecil-ment receptes i menuacutes setmanals) podria tenir tota la feina feta

He pogut comprovar que a casa no som els uacutenics que ens trobem en aquest tipus de situacioacute ja que la societat en quegrave vivim comporta una manca de temps generalitzada Per tant aquesta podria ser una aplicacioacute molt pragravectica per a gestionar lrsquoalimentacioacute de les llars i facilitar el dia a dia a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

10

2 Descripcioacute de lrsquoaplicacioacuteSampP en la seva totalitat eacutes una aplicacioacute mogravebil per a la creacioacute i gestioacute de receptes i menuacutes setma-nals dirigida especialment a amateurs del sector i que preteacuten reduiumlr el temps de gestioacute de lrsquousuari (facilitant-ne lrsquouacutes i els serveis) en funcioacute de les dades emmagatzemades en la base de dades i la realitzacioacute automagravetica del llistat de la compra

Principalment lrsquousuari pot crear i guardar les seves progravepies receptes i menuacutes o localitzar-ne de ge-nerats per altres usuaris i utilitzar-los com a tal o modificar-los per adaptar-los a les seves progravepies necessitats

ReceptesPer a la creacioacute drsquouna nova recepta lrsquousuari parteix drsquouna base de dades drsquoaliments drsquoon ha de seleccionar els ingredients necessaris (fruita verdura carn peix espegravecies) i indicar-ne les mesu-res adients En cas que lrsquoingredient no existeixi a la base de dades srsquohi inclouragrave automagraveticament i drsquoaquesta manera tot usuari colmiddotlabora en lrsquoampliacioacute i millora drsquoaquesta

Posteriorment es prossegueix amb lrsquoelaboracioacute de la recepta En aquest punt lrsquousuari ha drsquointroduir pas per pas el procediment a seguir per a dur a terme la recepta En un futur com a millora de futur si hi ha algun ingredient introduiumlt anteriorment el qual no ha estat utilitzat en lrsquoelaboracioacute lrsquoaplicacioacute alertaragrave a lrsquousuari de lrsquoingredient no utilitzat

En acabat srsquoha drsquointroduir una segraverie de caracteriacutestiques principals el tiacutetol de la recepta el nombre de comensals la colmiddotleccioacute a la qual pertany i una valoracioacute per indicar si es tracta drsquouna recepta saludable1

Finalment lrsquousuari teacute la possibilitat drsquoafegir una imatge identificativa de la recepta i se li ha drsquoassig-nar un tipus de privacitat a escollir entre PUacuteBLICA i PRIVADA La privacitat puacuteblica permet lrsquouacutes de la recepta per tots els usuaris de lrsquoaplicacioacute i els autoritza a reutilitzar-la en una altra recepta o a apro-fitar-la com a plantilla per una nova recepta per poder incloure-hi modificacions en funcioacute de criteris propis (variacioacute de mides o ingredients diferents temps de coccioacute)2

Les receptes puacutebliques tenen la possibilitat de ser valorades pels usuaris que nrsquohagin fet uacutes per un cantoacute podran indicar si creuen que eacutes una bona recepta (mrsquoagrada)3 i per altra banda podran seleccionar-les com a preferides3 En un futur tambeacute haurien de poder valorar si es tracta drsquouna recepta saludable4

1 Aquest sistema de valoracioacute es realitzaragrave mitjanccedilant els criteris hipocalograverica calograverica hipercalograverica i quedaragrave representat mitjanccedilant un sistema drsquoetiquetatge verd groc i vermell respectivament

2 Les receptes derivades faran esmena i enllaccedilaran la recepta original i per tant a lrsquoautor drsquoaquesta

3 Afecta la posicioacute de les receptes en el motor de cerca

4 Drsquoaquesta manera srsquoatenuaragrave el resultat drsquouna possible valoracioacute poc objectiva de lrsquoautor

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

11

MenuacutesEls menuacutes soacuten setmanals i estagraven associats a un nuacutemero de setmana anual (en principi el nuacutemero de setmana per la qual srsquoha creat) i es visualitzen en format calendari Cada setmana es divideix diagraveriament en els 2 agravepats principals dinar i sopar amb els quals treballa lrsquousuari

Lrsquousuari escull el nombre de de plats que formaran part de cada agravepat (depenent dels costums progravepis) afegint o eliminant plats els quals srsquoemplenaran mitjanccedilant receptes progravepies o puacutebliques utilitzant el cercador En cas que el menuacute escollit tingui superioritat de plats etiquetats com a no saludables lrsquoaplicacioacute alerta a lrsquousuari de lrsquoeleccioacute drsquouna dieta hipercalograverica

En aquest cas un cop finalitzat el menuacute lrsquoaplicacioacute automagraveticament el definiragrave com a menuacute saluda-ble (o no) en funcioacute de les receptes utilitzades i lrsquousuari li atorgaragrave el tipus de privacitat dessitjada En cas que lrsquousuari no generi un nou menuacute sinoacute que nrsquoutilitzi un de puacuteblic de la base de dades aquest igual que succeeix amb les receptes podragrave valorar-lo io utilitzar-lo com a plantilla per poder modifi-car-ne alguns aspectes segons preferegravencies

CerquesTant la cerca de receptes com la cerca de menuacutes ja elaborats es du a terme a partir de diferents filtres a escollir per lrsquousuari en el cas de les receptes drsquoacord amb lrsquoautor el tipus de plat (colmiddotlec-cions) ingredients io nuacutemero de comenccedilals i en el cas dels menuacutes drsquoacord amb autor io el nuacutem de setmana

Llistat de compraLrsquoaplicacioacute realitzaragrave en funcioacute del menuacute setmanal el llistat de la compra el qual podragrave ser modificat per lrsquousuari segons conveniegravenciaPodragrave eliminar elements que ja tingui a casa o afegir-ne de nous ja siguin alimentaris o noLa funcioacutenalitat del llistat de compra srsquoampliaragrave oferint la possibilitat a lrsquousuari de ser gestionada per alguna empresa dedicada a la realitzacioacute de compres i enviament a domicili

Caracteriacutestiques tegravecniquesPer a dur a terme el projecte les tecnologies utilitzades estan relacionades amb la Plataforma Flash ja que aquesta plataforma eacutes avui en dia un referent en la creacioacute drsquoAplicacions Rich Media (ARM) gragravecies a les seves capacitats

bull Enfocament al suport de diferents mitjansbull Compatibilitat amb muacuteltiples plataformesbull Adaptacioacute drsquoexecucioacute en diferents dispositius

Mitjanccedilant lrsquoIDE FlashDevelop64 combinarem el Llenguatge de Programacioacute Orientat a Objectes ActionScript3 (seguint el patroacute Model-Vista-Controlador el qual manteacute un codi ordenat i estructurat) amb els arxius en format swf creats amb el programa Adobe Animate CC

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

AbstractAquest Treball Final de Grau (TFG) planteja el disseny i el desenvolupament drsquouna aplicacioacute mogravebil en la qual usuaris amateurs podran gestionar diferents menuacutes setmanals i receptes drsquouna manera senzilla i intuiumltiva

Lrsquoaplicacioacute SampP (Sal i Pebre) preteacuten reduir el temps futur que lrsquousuari necessitaragrave per elaborar els menuacutes setmanals quotidians de manera que com meacutes informacioacute hi hagi emmagatzemada a lrsquoapli-cacioacute menys feina tindragrave lrsquousuari per tal de dur a terme la gestioacute

La falta de temps lliure en quegrave em trobo per lrsquoobligacioacute de realitzar totes aquelles prioritats ne-cessagraveries mrsquohan dut a la temagravetica drsquoaquest TFG I si puc reduir el temps de gestioacute de tot allograve que envolta el proceacutes de lrsquoalimentacioacute

En aquest sentit aquest projecte eacutes un primer pas per assolir una aplicacioacute que abraci gran part drsquoaquesta proceacutes eacutes a dir no estem parlant drsquoun projecte amb punt final sinoacute meacutes aviat de la base drsquouna aplicacioacute amb diferents projeccions de futur mitjanccedilant les quals srsquoestendran les funcionalitats de lrsquoaplicacioacute i srsquoampliaran els objectius inicials drsquoaquest projecte

Pel desenvolupament de lrsquoaplicacioacute srsquoutilitzen tecnologies relacionades amb plataforma Flash per les seves capacitats multimegravedia multiplataforma i multi dispositiu Mitjanccedilant lrsquoIDE (Integrated develo-pment environment o entorn integrat de desenvolupament) FlashDevelop64 es combinaragrave el Llen-guatge de Programacioacute Orientat a Objectes ActionScript3 amb continguts SWF creats amb lrsquoAdobe Animate CC (anteriorment Adobe Flash Professional)

Paraules clauRecepta receptari menuacute cuina aplicacioacute mogravebil disseny centrat en lrsquousuari plataforma Flash

Abstract (english version)Sometimes I believe that there are not enough hours in the day I have many things to do different priorities in life but not enough time Although I try to make the most of the day there are moments when simply thinking of the meals I should prepare during the week for me and my family take a great deal of time Time I could spend doing something else And that got me thinking is there anything I can do to reduce the time I spend organizing those meals

That idea led me to the subject of this project

This Final Degree Project (FDP) I am presenting is the design and development of an application program where users can organize different menus and recipes in a simple and intuitive way Salt amp Pepper (SampP) Applicationrsquos objective is to reduce the time people employ preparing weekly menus Therefore the more information loaded into the application the easier to manage the operations for the user and the faster one can organize the meals so that people will be able to save time for other things

In this sense this project is but the first step to create an application that will cover and help with the alimentation process It is the basis of a program that holds different prospects for the future which will extend the applicationrsquos functionalities and will expand the original goals of this project

For the development of this application (Adobe) Flash Platform technologies are used because of their multimedia multiplatform and multi-device capability By means of IDE (Integrated Development Environment) FlashDevelop64 Object-Oriented Programming Language ActionSript3 is combined with SWF contents created with Adobe Animate CC (previously Adobe Flash Professional)

KeywordsRecipe recipe book menu cuisine mobile application user-centered design Flash platform

Notacions i Convencions

Tiacutetols Arial 20 negreta alineacioacute esquerra Seccions Arial 13 negreta alineacioacute esquerra

Subseccions Arial 11 negreta cursiva alineacioacute esquerra

Cos Arial 11 regular justificacioacute esquerra

Peu figures i taules Arial 8 regular justificacioacute centrada

Annotacions de peu de pagravegina Arial 8 regular justificacioacute eacutesquerra

1 Introduccioacute 92 Descripcioacute de lrsquoaplicacioacute 103 Objectius del projecte 12

31 Objectius principals 1232 Objectius secundaris 12

4 Metodologia 135 Planificacioacute 14

51 Fites i dates clau 1452 Diagrama de Gantt 15

6 Proceacutes de treball 167 Arquitectura de lrsquoaplicacioacute 17

71 Client-Servidor 1772 Model-Vista-Controlador 17

8 Anagravelisi pregravevia 1881 Anagravelisi de producte 1882 Anagravelisi de lrsquoaudiegravencia 1883 Anagravelisi de mercat 20

9 Disseny de la Base de Dades 2491 Diagrama Entitat-Relacio (E-R) 2492 Model Relacional 25

11 Arquitectura de la informacioacute 26111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI 26112 Continguts de lrsquoaplicacioacute RECEPTARI 27113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte) 29114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte) 30115 Abre de continguts 31116 Prototips Lo-Fi Wireframes 32117 Prototips Hi-Fi Mockups 34

12 Avaluacioacute de la usabilitat 38121 Modificacions inicials 38122 Evaluacioacute heuriacutestica 38123 Avaluacioacute final 40

13 Projeccioacute a futur 41131 Correccioacute funcionalitats bagravesiques 41132 Millores de lrsquoaplicacioacute 41133 Ampliacioacute de lrsquoaplicacioacute 42

14 Conclusions 44Annex I Lliurables del projecte 45Annex II Codi font 46Annex III Modelatge drsquousuari 49Annex IV Llibre drsquoestil 52Annex V Guia drsquousuari 57Annex VI Bibliografia 63

Iacutendex

Figures

Iacutendex de figures

Figura 1 Diagrama de Gantt 15Figura 2 Model-Vista-Controlador 17Figura 3 Captura de pantalla Easy Menu 20Figura 4 Captura de pantalla Recetario 21Figura 5 Captura de pantalla Planifood 22Figura 6 Diagrama Entitat-Relacioacute 24Figura 7 Arbre de continguts 31Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos) 32Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute) 32Figura 10 Prototip Baixa Fidelitat (Editar Recepta) 32Figura 11 Prototip Baixa Fidelitat (Cercar Recepta) 33Figura 12 Prototip Baixa Fidelitat (Recepta) 33Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute) 33Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari) 34Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute) 34Figura 16 Prototip Alta Fidelitat (Editar Recepta) 35Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta) 35Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes) 36Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes) 36Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute) 37Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute) 37

9

1 Introduccioacute

Sempre he donat importagravencia a dur una alimentacioacute tant sana i equilibrada com variada i plaent I per tant la gestioacute que comporta pensar i elaborar els menuacutes setmanals adients i la recerca de recep-tes necessagraveries per dur-los a terme ha sigut una prioritat en la meva vida

Perograve des del moment en quegrave vaig decidir tornar a estudiar i cursar aquest Grau Multimegravedia de la Universitat Oberta de Catalunya (UOC) compaginat amb una jornada laboral de 8 hores les meves prioritats personals es van veure modificades ja que em vaig trobar amb grans dificultats a lrsquohora de gestionar certs aspectes per manca de temps

Ara amb lrsquoarribada del meu fill he tornat a donar gran importagravencia a lrsquoalimentacioacute perograve no tinc la possibilitat de dedicar-hi el temps necessari i de cap manera el temps que hi dedicava fa uns anys Aquest fet mrsquoha dut a la temagravetica drsquoaquest TFG Quegrave passaria si hagueacutes guardat tota la informacioacute sobre la gestioacute de menuacutes i recerca de receptes que vaig realitzar durant tant de temps

Si beacute avui puc comptar amb lrsquoexperiegravencia que anat guanyant amb els anys mitjanccedilant una aplicacioacute com la que es desenvolupa en aquest projecte (amb la qual es gestionen i srsquoemmagatzemen fagravecil-ment receptes i menuacutes setmanals) podria tenir tota la feina feta

He pogut comprovar que a casa no som els uacutenics que ens trobem en aquest tipus de situacioacute ja que la societat en quegrave vivim comporta una manca de temps generalitzada Per tant aquesta podria ser una aplicacioacute molt pragravectica per a gestionar lrsquoalimentacioacute de les llars i facilitar el dia a dia a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

10

2 Descripcioacute de lrsquoaplicacioacuteSampP en la seva totalitat eacutes una aplicacioacute mogravebil per a la creacioacute i gestioacute de receptes i menuacutes setma-nals dirigida especialment a amateurs del sector i que preteacuten reduiumlr el temps de gestioacute de lrsquousuari (facilitant-ne lrsquouacutes i els serveis) en funcioacute de les dades emmagatzemades en la base de dades i la realitzacioacute automagravetica del llistat de la compra

Principalment lrsquousuari pot crear i guardar les seves progravepies receptes i menuacutes o localitzar-ne de ge-nerats per altres usuaris i utilitzar-los com a tal o modificar-los per adaptar-los a les seves progravepies necessitats

ReceptesPer a la creacioacute drsquouna nova recepta lrsquousuari parteix drsquouna base de dades drsquoaliments drsquoon ha de seleccionar els ingredients necessaris (fruita verdura carn peix espegravecies) i indicar-ne les mesu-res adients En cas que lrsquoingredient no existeixi a la base de dades srsquohi inclouragrave automagraveticament i drsquoaquesta manera tot usuari colmiddotlabora en lrsquoampliacioacute i millora drsquoaquesta

Posteriorment es prossegueix amb lrsquoelaboracioacute de la recepta En aquest punt lrsquousuari ha drsquointroduir pas per pas el procediment a seguir per a dur a terme la recepta En un futur com a millora de futur si hi ha algun ingredient introduiumlt anteriorment el qual no ha estat utilitzat en lrsquoelaboracioacute lrsquoaplicacioacute alertaragrave a lrsquousuari de lrsquoingredient no utilitzat

En acabat srsquoha drsquointroduir una segraverie de caracteriacutestiques principals el tiacutetol de la recepta el nombre de comensals la colmiddotleccioacute a la qual pertany i una valoracioacute per indicar si es tracta drsquouna recepta saludable1

Finalment lrsquousuari teacute la possibilitat drsquoafegir una imatge identificativa de la recepta i se li ha drsquoassig-nar un tipus de privacitat a escollir entre PUacuteBLICA i PRIVADA La privacitat puacuteblica permet lrsquouacutes de la recepta per tots els usuaris de lrsquoaplicacioacute i els autoritza a reutilitzar-la en una altra recepta o a apro-fitar-la com a plantilla per una nova recepta per poder incloure-hi modificacions en funcioacute de criteris propis (variacioacute de mides o ingredients diferents temps de coccioacute)2

Les receptes puacutebliques tenen la possibilitat de ser valorades pels usuaris que nrsquohagin fet uacutes per un cantoacute podran indicar si creuen que eacutes una bona recepta (mrsquoagrada)3 i per altra banda podran seleccionar-les com a preferides3 En un futur tambeacute haurien de poder valorar si es tracta drsquouna recepta saludable4

1 Aquest sistema de valoracioacute es realitzaragrave mitjanccedilant els criteris hipocalograverica calograverica hipercalograverica i quedaragrave representat mitjanccedilant un sistema drsquoetiquetatge verd groc i vermell respectivament

2 Les receptes derivades faran esmena i enllaccedilaran la recepta original i per tant a lrsquoautor drsquoaquesta

3 Afecta la posicioacute de les receptes en el motor de cerca

4 Drsquoaquesta manera srsquoatenuaragrave el resultat drsquouna possible valoracioacute poc objectiva de lrsquoautor

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

11

MenuacutesEls menuacutes soacuten setmanals i estagraven associats a un nuacutemero de setmana anual (en principi el nuacutemero de setmana per la qual srsquoha creat) i es visualitzen en format calendari Cada setmana es divideix diagraveriament en els 2 agravepats principals dinar i sopar amb els quals treballa lrsquousuari

Lrsquousuari escull el nombre de de plats que formaran part de cada agravepat (depenent dels costums progravepis) afegint o eliminant plats els quals srsquoemplenaran mitjanccedilant receptes progravepies o puacutebliques utilitzant el cercador En cas que el menuacute escollit tingui superioritat de plats etiquetats com a no saludables lrsquoaplicacioacute alerta a lrsquousuari de lrsquoeleccioacute drsquouna dieta hipercalograverica

En aquest cas un cop finalitzat el menuacute lrsquoaplicacioacute automagraveticament el definiragrave com a menuacute saluda-ble (o no) en funcioacute de les receptes utilitzades i lrsquousuari li atorgaragrave el tipus de privacitat dessitjada En cas que lrsquousuari no generi un nou menuacute sinoacute que nrsquoutilitzi un de puacuteblic de la base de dades aquest igual que succeeix amb les receptes podragrave valorar-lo io utilitzar-lo com a plantilla per poder modifi-car-ne alguns aspectes segons preferegravencies

CerquesTant la cerca de receptes com la cerca de menuacutes ja elaborats es du a terme a partir de diferents filtres a escollir per lrsquousuari en el cas de les receptes drsquoacord amb lrsquoautor el tipus de plat (colmiddotlec-cions) ingredients io nuacutemero de comenccedilals i en el cas dels menuacutes drsquoacord amb autor io el nuacutem de setmana

Llistat de compraLrsquoaplicacioacute realitzaragrave en funcioacute del menuacute setmanal el llistat de la compra el qual podragrave ser modificat per lrsquousuari segons conveniegravenciaPodragrave eliminar elements que ja tingui a casa o afegir-ne de nous ja siguin alimentaris o noLa funcioacutenalitat del llistat de compra srsquoampliaragrave oferint la possibilitat a lrsquousuari de ser gestionada per alguna empresa dedicada a la realitzacioacute de compres i enviament a domicili

Caracteriacutestiques tegravecniquesPer a dur a terme el projecte les tecnologies utilitzades estan relacionades amb la Plataforma Flash ja que aquesta plataforma eacutes avui en dia un referent en la creacioacute drsquoAplicacions Rich Media (ARM) gragravecies a les seves capacitats

bull Enfocament al suport de diferents mitjansbull Compatibilitat amb muacuteltiples plataformesbull Adaptacioacute drsquoexecucioacute en diferents dispositius

Mitjanccedilant lrsquoIDE FlashDevelop64 combinarem el Llenguatge de Programacioacute Orientat a Objectes ActionScript3 (seguint el patroacute Model-Vista-Controlador el qual manteacute un codi ordenat i estructurat) amb els arxius en format swf creats amb el programa Adobe Animate CC

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

Abstract (english version)Sometimes I believe that there are not enough hours in the day I have many things to do different priorities in life but not enough time Although I try to make the most of the day there are moments when simply thinking of the meals I should prepare during the week for me and my family take a great deal of time Time I could spend doing something else And that got me thinking is there anything I can do to reduce the time I spend organizing those meals

That idea led me to the subject of this project

This Final Degree Project (FDP) I am presenting is the design and development of an application program where users can organize different menus and recipes in a simple and intuitive way Salt amp Pepper (SampP) Applicationrsquos objective is to reduce the time people employ preparing weekly menus Therefore the more information loaded into the application the easier to manage the operations for the user and the faster one can organize the meals so that people will be able to save time for other things

In this sense this project is but the first step to create an application that will cover and help with the alimentation process It is the basis of a program that holds different prospects for the future which will extend the applicationrsquos functionalities and will expand the original goals of this project

For the development of this application (Adobe) Flash Platform technologies are used because of their multimedia multiplatform and multi-device capability By means of IDE (Integrated Development Environment) FlashDevelop64 Object-Oriented Programming Language ActionSript3 is combined with SWF contents created with Adobe Animate CC (previously Adobe Flash Professional)

KeywordsRecipe recipe book menu cuisine mobile application user-centered design Flash platform

Notacions i Convencions

Tiacutetols Arial 20 negreta alineacioacute esquerra Seccions Arial 13 negreta alineacioacute esquerra

Subseccions Arial 11 negreta cursiva alineacioacute esquerra

Cos Arial 11 regular justificacioacute esquerra

Peu figures i taules Arial 8 regular justificacioacute centrada

Annotacions de peu de pagravegina Arial 8 regular justificacioacute eacutesquerra

1 Introduccioacute 92 Descripcioacute de lrsquoaplicacioacute 103 Objectius del projecte 12

31 Objectius principals 1232 Objectius secundaris 12

4 Metodologia 135 Planificacioacute 14

51 Fites i dates clau 1452 Diagrama de Gantt 15

6 Proceacutes de treball 167 Arquitectura de lrsquoaplicacioacute 17

71 Client-Servidor 1772 Model-Vista-Controlador 17

8 Anagravelisi pregravevia 1881 Anagravelisi de producte 1882 Anagravelisi de lrsquoaudiegravencia 1883 Anagravelisi de mercat 20

9 Disseny de la Base de Dades 2491 Diagrama Entitat-Relacio (E-R) 2492 Model Relacional 25

11 Arquitectura de la informacioacute 26111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI 26112 Continguts de lrsquoaplicacioacute RECEPTARI 27113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte) 29114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte) 30115 Abre de continguts 31116 Prototips Lo-Fi Wireframes 32117 Prototips Hi-Fi Mockups 34

12 Avaluacioacute de la usabilitat 38121 Modificacions inicials 38122 Evaluacioacute heuriacutestica 38123 Avaluacioacute final 40

13 Projeccioacute a futur 41131 Correccioacute funcionalitats bagravesiques 41132 Millores de lrsquoaplicacioacute 41133 Ampliacioacute de lrsquoaplicacioacute 42

14 Conclusions 44Annex I Lliurables del projecte 45Annex II Codi font 46Annex III Modelatge drsquousuari 49Annex IV Llibre drsquoestil 52Annex V Guia drsquousuari 57Annex VI Bibliografia 63

Iacutendex

Figures

Iacutendex de figures

Figura 1 Diagrama de Gantt 15Figura 2 Model-Vista-Controlador 17Figura 3 Captura de pantalla Easy Menu 20Figura 4 Captura de pantalla Recetario 21Figura 5 Captura de pantalla Planifood 22Figura 6 Diagrama Entitat-Relacioacute 24Figura 7 Arbre de continguts 31Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos) 32Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute) 32Figura 10 Prototip Baixa Fidelitat (Editar Recepta) 32Figura 11 Prototip Baixa Fidelitat (Cercar Recepta) 33Figura 12 Prototip Baixa Fidelitat (Recepta) 33Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute) 33Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari) 34Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute) 34Figura 16 Prototip Alta Fidelitat (Editar Recepta) 35Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta) 35Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes) 36Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes) 36Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute) 37Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute) 37

9

1 Introduccioacute

Sempre he donat importagravencia a dur una alimentacioacute tant sana i equilibrada com variada i plaent I per tant la gestioacute que comporta pensar i elaborar els menuacutes setmanals adients i la recerca de recep-tes necessagraveries per dur-los a terme ha sigut una prioritat en la meva vida

Perograve des del moment en quegrave vaig decidir tornar a estudiar i cursar aquest Grau Multimegravedia de la Universitat Oberta de Catalunya (UOC) compaginat amb una jornada laboral de 8 hores les meves prioritats personals es van veure modificades ja que em vaig trobar amb grans dificultats a lrsquohora de gestionar certs aspectes per manca de temps

Ara amb lrsquoarribada del meu fill he tornat a donar gran importagravencia a lrsquoalimentacioacute perograve no tinc la possibilitat de dedicar-hi el temps necessari i de cap manera el temps que hi dedicava fa uns anys Aquest fet mrsquoha dut a la temagravetica drsquoaquest TFG Quegrave passaria si hagueacutes guardat tota la informacioacute sobre la gestioacute de menuacutes i recerca de receptes que vaig realitzar durant tant de temps

Si beacute avui puc comptar amb lrsquoexperiegravencia que anat guanyant amb els anys mitjanccedilant una aplicacioacute com la que es desenvolupa en aquest projecte (amb la qual es gestionen i srsquoemmagatzemen fagravecil-ment receptes i menuacutes setmanals) podria tenir tota la feina feta

He pogut comprovar que a casa no som els uacutenics que ens trobem en aquest tipus de situacioacute ja que la societat en quegrave vivim comporta una manca de temps generalitzada Per tant aquesta podria ser una aplicacioacute molt pragravectica per a gestionar lrsquoalimentacioacute de les llars i facilitar el dia a dia a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

10

2 Descripcioacute de lrsquoaplicacioacuteSampP en la seva totalitat eacutes una aplicacioacute mogravebil per a la creacioacute i gestioacute de receptes i menuacutes setma-nals dirigida especialment a amateurs del sector i que preteacuten reduiumlr el temps de gestioacute de lrsquousuari (facilitant-ne lrsquouacutes i els serveis) en funcioacute de les dades emmagatzemades en la base de dades i la realitzacioacute automagravetica del llistat de la compra

Principalment lrsquousuari pot crear i guardar les seves progravepies receptes i menuacutes o localitzar-ne de ge-nerats per altres usuaris i utilitzar-los com a tal o modificar-los per adaptar-los a les seves progravepies necessitats

ReceptesPer a la creacioacute drsquouna nova recepta lrsquousuari parteix drsquouna base de dades drsquoaliments drsquoon ha de seleccionar els ingredients necessaris (fruita verdura carn peix espegravecies) i indicar-ne les mesu-res adients En cas que lrsquoingredient no existeixi a la base de dades srsquohi inclouragrave automagraveticament i drsquoaquesta manera tot usuari colmiddotlabora en lrsquoampliacioacute i millora drsquoaquesta

Posteriorment es prossegueix amb lrsquoelaboracioacute de la recepta En aquest punt lrsquousuari ha drsquointroduir pas per pas el procediment a seguir per a dur a terme la recepta En un futur com a millora de futur si hi ha algun ingredient introduiumlt anteriorment el qual no ha estat utilitzat en lrsquoelaboracioacute lrsquoaplicacioacute alertaragrave a lrsquousuari de lrsquoingredient no utilitzat

En acabat srsquoha drsquointroduir una segraverie de caracteriacutestiques principals el tiacutetol de la recepta el nombre de comensals la colmiddotleccioacute a la qual pertany i una valoracioacute per indicar si es tracta drsquouna recepta saludable1

Finalment lrsquousuari teacute la possibilitat drsquoafegir una imatge identificativa de la recepta i se li ha drsquoassig-nar un tipus de privacitat a escollir entre PUacuteBLICA i PRIVADA La privacitat puacuteblica permet lrsquouacutes de la recepta per tots els usuaris de lrsquoaplicacioacute i els autoritza a reutilitzar-la en una altra recepta o a apro-fitar-la com a plantilla per una nova recepta per poder incloure-hi modificacions en funcioacute de criteris propis (variacioacute de mides o ingredients diferents temps de coccioacute)2

Les receptes puacutebliques tenen la possibilitat de ser valorades pels usuaris que nrsquohagin fet uacutes per un cantoacute podran indicar si creuen que eacutes una bona recepta (mrsquoagrada)3 i per altra banda podran seleccionar-les com a preferides3 En un futur tambeacute haurien de poder valorar si es tracta drsquouna recepta saludable4

1 Aquest sistema de valoracioacute es realitzaragrave mitjanccedilant els criteris hipocalograverica calograverica hipercalograverica i quedaragrave representat mitjanccedilant un sistema drsquoetiquetatge verd groc i vermell respectivament

2 Les receptes derivades faran esmena i enllaccedilaran la recepta original i per tant a lrsquoautor drsquoaquesta

3 Afecta la posicioacute de les receptes en el motor de cerca

4 Drsquoaquesta manera srsquoatenuaragrave el resultat drsquouna possible valoracioacute poc objectiva de lrsquoautor

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

11

MenuacutesEls menuacutes soacuten setmanals i estagraven associats a un nuacutemero de setmana anual (en principi el nuacutemero de setmana per la qual srsquoha creat) i es visualitzen en format calendari Cada setmana es divideix diagraveriament en els 2 agravepats principals dinar i sopar amb els quals treballa lrsquousuari

Lrsquousuari escull el nombre de de plats que formaran part de cada agravepat (depenent dels costums progravepis) afegint o eliminant plats els quals srsquoemplenaran mitjanccedilant receptes progravepies o puacutebliques utilitzant el cercador En cas que el menuacute escollit tingui superioritat de plats etiquetats com a no saludables lrsquoaplicacioacute alerta a lrsquousuari de lrsquoeleccioacute drsquouna dieta hipercalograverica

En aquest cas un cop finalitzat el menuacute lrsquoaplicacioacute automagraveticament el definiragrave com a menuacute saluda-ble (o no) en funcioacute de les receptes utilitzades i lrsquousuari li atorgaragrave el tipus de privacitat dessitjada En cas que lrsquousuari no generi un nou menuacute sinoacute que nrsquoutilitzi un de puacuteblic de la base de dades aquest igual que succeeix amb les receptes podragrave valorar-lo io utilitzar-lo com a plantilla per poder modifi-car-ne alguns aspectes segons preferegravencies

CerquesTant la cerca de receptes com la cerca de menuacutes ja elaborats es du a terme a partir de diferents filtres a escollir per lrsquousuari en el cas de les receptes drsquoacord amb lrsquoautor el tipus de plat (colmiddotlec-cions) ingredients io nuacutemero de comenccedilals i en el cas dels menuacutes drsquoacord amb autor io el nuacutem de setmana

Llistat de compraLrsquoaplicacioacute realitzaragrave en funcioacute del menuacute setmanal el llistat de la compra el qual podragrave ser modificat per lrsquousuari segons conveniegravenciaPodragrave eliminar elements que ja tingui a casa o afegir-ne de nous ja siguin alimentaris o noLa funcioacutenalitat del llistat de compra srsquoampliaragrave oferint la possibilitat a lrsquousuari de ser gestionada per alguna empresa dedicada a la realitzacioacute de compres i enviament a domicili

Caracteriacutestiques tegravecniquesPer a dur a terme el projecte les tecnologies utilitzades estan relacionades amb la Plataforma Flash ja que aquesta plataforma eacutes avui en dia un referent en la creacioacute drsquoAplicacions Rich Media (ARM) gragravecies a les seves capacitats

bull Enfocament al suport de diferents mitjansbull Compatibilitat amb muacuteltiples plataformesbull Adaptacioacute drsquoexecucioacute en diferents dispositius

Mitjanccedilant lrsquoIDE FlashDevelop64 combinarem el Llenguatge de Programacioacute Orientat a Objectes ActionScript3 (seguint el patroacute Model-Vista-Controlador el qual manteacute un codi ordenat i estructurat) amb els arxius en format swf creats amb el programa Adobe Animate CC

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

Notacions i Convencions

Tiacutetols Arial 20 negreta alineacioacute esquerra Seccions Arial 13 negreta alineacioacute esquerra

Subseccions Arial 11 negreta cursiva alineacioacute esquerra

Cos Arial 11 regular justificacioacute esquerra

Peu figures i taules Arial 8 regular justificacioacute centrada

Annotacions de peu de pagravegina Arial 8 regular justificacioacute eacutesquerra

1 Introduccioacute 92 Descripcioacute de lrsquoaplicacioacute 103 Objectius del projecte 12

31 Objectius principals 1232 Objectius secundaris 12

4 Metodologia 135 Planificacioacute 14

51 Fites i dates clau 1452 Diagrama de Gantt 15

6 Proceacutes de treball 167 Arquitectura de lrsquoaplicacioacute 17

71 Client-Servidor 1772 Model-Vista-Controlador 17

8 Anagravelisi pregravevia 1881 Anagravelisi de producte 1882 Anagravelisi de lrsquoaudiegravencia 1883 Anagravelisi de mercat 20

9 Disseny de la Base de Dades 2491 Diagrama Entitat-Relacio (E-R) 2492 Model Relacional 25

11 Arquitectura de la informacioacute 26111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI 26112 Continguts de lrsquoaplicacioacute RECEPTARI 27113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte) 29114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte) 30115 Abre de continguts 31116 Prototips Lo-Fi Wireframes 32117 Prototips Hi-Fi Mockups 34

12 Avaluacioacute de la usabilitat 38121 Modificacions inicials 38122 Evaluacioacute heuriacutestica 38123 Avaluacioacute final 40

13 Projeccioacute a futur 41131 Correccioacute funcionalitats bagravesiques 41132 Millores de lrsquoaplicacioacute 41133 Ampliacioacute de lrsquoaplicacioacute 42

14 Conclusions 44Annex I Lliurables del projecte 45Annex II Codi font 46Annex III Modelatge drsquousuari 49Annex IV Llibre drsquoestil 52Annex V Guia drsquousuari 57Annex VI Bibliografia 63

Iacutendex

Figures

Iacutendex de figures

Figura 1 Diagrama de Gantt 15Figura 2 Model-Vista-Controlador 17Figura 3 Captura de pantalla Easy Menu 20Figura 4 Captura de pantalla Recetario 21Figura 5 Captura de pantalla Planifood 22Figura 6 Diagrama Entitat-Relacioacute 24Figura 7 Arbre de continguts 31Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos) 32Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute) 32Figura 10 Prototip Baixa Fidelitat (Editar Recepta) 32Figura 11 Prototip Baixa Fidelitat (Cercar Recepta) 33Figura 12 Prototip Baixa Fidelitat (Recepta) 33Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute) 33Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari) 34Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute) 34Figura 16 Prototip Alta Fidelitat (Editar Recepta) 35Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta) 35Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes) 36Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes) 36Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute) 37Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute) 37

9

1 Introduccioacute

Sempre he donat importagravencia a dur una alimentacioacute tant sana i equilibrada com variada i plaent I per tant la gestioacute que comporta pensar i elaborar els menuacutes setmanals adients i la recerca de recep-tes necessagraveries per dur-los a terme ha sigut una prioritat en la meva vida

Perograve des del moment en quegrave vaig decidir tornar a estudiar i cursar aquest Grau Multimegravedia de la Universitat Oberta de Catalunya (UOC) compaginat amb una jornada laboral de 8 hores les meves prioritats personals es van veure modificades ja que em vaig trobar amb grans dificultats a lrsquohora de gestionar certs aspectes per manca de temps

Ara amb lrsquoarribada del meu fill he tornat a donar gran importagravencia a lrsquoalimentacioacute perograve no tinc la possibilitat de dedicar-hi el temps necessari i de cap manera el temps que hi dedicava fa uns anys Aquest fet mrsquoha dut a la temagravetica drsquoaquest TFG Quegrave passaria si hagueacutes guardat tota la informacioacute sobre la gestioacute de menuacutes i recerca de receptes que vaig realitzar durant tant de temps

Si beacute avui puc comptar amb lrsquoexperiegravencia que anat guanyant amb els anys mitjanccedilant una aplicacioacute com la que es desenvolupa en aquest projecte (amb la qual es gestionen i srsquoemmagatzemen fagravecil-ment receptes i menuacutes setmanals) podria tenir tota la feina feta

He pogut comprovar que a casa no som els uacutenics que ens trobem en aquest tipus de situacioacute ja que la societat en quegrave vivim comporta una manca de temps generalitzada Per tant aquesta podria ser una aplicacioacute molt pragravectica per a gestionar lrsquoalimentacioacute de les llars i facilitar el dia a dia a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

10

2 Descripcioacute de lrsquoaplicacioacuteSampP en la seva totalitat eacutes una aplicacioacute mogravebil per a la creacioacute i gestioacute de receptes i menuacutes setma-nals dirigida especialment a amateurs del sector i que preteacuten reduiumlr el temps de gestioacute de lrsquousuari (facilitant-ne lrsquouacutes i els serveis) en funcioacute de les dades emmagatzemades en la base de dades i la realitzacioacute automagravetica del llistat de la compra

Principalment lrsquousuari pot crear i guardar les seves progravepies receptes i menuacutes o localitzar-ne de ge-nerats per altres usuaris i utilitzar-los com a tal o modificar-los per adaptar-los a les seves progravepies necessitats

ReceptesPer a la creacioacute drsquouna nova recepta lrsquousuari parteix drsquouna base de dades drsquoaliments drsquoon ha de seleccionar els ingredients necessaris (fruita verdura carn peix espegravecies) i indicar-ne les mesu-res adients En cas que lrsquoingredient no existeixi a la base de dades srsquohi inclouragrave automagraveticament i drsquoaquesta manera tot usuari colmiddotlabora en lrsquoampliacioacute i millora drsquoaquesta

Posteriorment es prossegueix amb lrsquoelaboracioacute de la recepta En aquest punt lrsquousuari ha drsquointroduir pas per pas el procediment a seguir per a dur a terme la recepta En un futur com a millora de futur si hi ha algun ingredient introduiumlt anteriorment el qual no ha estat utilitzat en lrsquoelaboracioacute lrsquoaplicacioacute alertaragrave a lrsquousuari de lrsquoingredient no utilitzat

En acabat srsquoha drsquointroduir una segraverie de caracteriacutestiques principals el tiacutetol de la recepta el nombre de comensals la colmiddotleccioacute a la qual pertany i una valoracioacute per indicar si es tracta drsquouna recepta saludable1

Finalment lrsquousuari teacute la possibilitat drsquoafegir una imatge identificativa de la recepta i se li ha drsquoassig-nar un tipus de privacitat a escollir entre PUacuteBLICA i PRIVADA La privacitat puacuteblica permet lrsquouacutes de la recepta per tots els usuaris de lrsquoaplicacioacute i els autoritza a reutilitzar-la en una altra recepta o a apro-fitar-la com a plantilla per una nova recepta per poder incloure-hi modificacions en funcioacute de criteris propis (variacioacute de mides o ingredients diferents temps de coccioacute)2

Les receptes puacutebliques tenen la possibilitat de ser valorades pels usuaris que nrsquohagin fet uacutes per un cantoacute podran indicar si creuen que eacutes una bona recepta (mrsquoagrada)3 i per altra banda podran seleccionar-les com a preferides3 En un futur tambeacute haurien de poder valorar si es tracta drsquouna recepta saludable4

1 Aquest sistema de valoracioacute es realitzaragrave mitjanccedilant els criteris hipocalograverica calograverica hipercalograverica i quedaragrave representat mitjanccedilant un sistema drsquoetiquetatge verd groc i vermell respectivament

2 Les receptes derivades faran esmena i enllaccedilaran la recepta original i per tant a lrsquoautor drsquoaquesta

3 Afecta la posicioacute de les receptes en el motor de cerca

4 Drsquoaquesta manera srsquoatenuaragrave el resultat drsquouna possible valoracioacute poc objectiva de lrsquoautor

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

11

MenuacutesEls menuacutes soacuten setmanals i estagraven associats a un nuacutemero de setmana anual (en principi el nuacutemero de setmana per la qual srsquoha creat) i es visualitzen en format calendari Cada setmana es divideix diagraveriament en els 2 agravepats principals dinar i sopar amb els quals treballa lrsquousuari

Lrsquousuari escull el nombre de de plats que formaran part de cada agravepat (depenent dels costums progravepis) afegint o eliminant plats els quals srsquoemplenaran mitjanccedilant receptes progravepies o puacutebliques utilitzant el cercador En cas que el menuacute escollit tingui superioritat de plats etiquetats com a no saludables lrsquoaplicacioacute alerta a lrsquousuari de lrsquoeleccioacute drsquouna dieta hipercalograverica

En aquest cas un cop finalitzat el menuacute lrsquoaplicacioacute automagraveticament el definiragrave com a menuacute saluda-ble (o no) en funcioacute de les receptes utilitzades i lrsquousuari li atorgaragrave el tipus de privacitat dessitjada En cas que lrsquousuari no generi un nou menuacute sinoacute que nrsquoutilitzi un de puacuteblic de la base de dades aquest igual que succeeix amb les receptes podragrave valorar-lo io utilitzar-lo com a plantilla per poder modifi-car-ne alguns aspectes segons preferegravencies

CerquesTant la cerca de receptes com la cerca de menuacutes ja elaborats es du a terme a partir de diferents filtres a escollir per lrsquousuari en el cas de les receptes drsquoacord amb lrsquoautor el tipus de plat (colmiddotlec-cions) ingredients io nuacutemero de comenccedilals i en el cas dels menuacutes drsquoacord amb autor io el nuacutem de setmana

Llistat de compraLrsquoaplicacioacute realitzaragrave en funcioacute del menuacute setmanal el llistat de la compra el qual podragrave ser modificat per lrsquousuari segons conveniegravenciaPodragrave eliminar elements que ja tingui a casa o afegir-ne de nous ja siguin alimentaris o noLa funcioacutenalitat del llistat de compra srsquoampliaragrave oferint la possibilitat a lrsquousuari de ser gestionada per alguna empresa dedicada a la realitzacioacute de compres i enviament a domicili

Caracteriacutestiques tegravecniquesPer a dur a terme el projecte les tecnologies utilitzades estan relacionades amb la Plataforma Flash ja que aquesta plataforma eacutes avui en dia un referent en la creacioacute drsquoAplicacions Rich Media (ARM) gragravecies a les seves capacitats

bull Enfocament al suport de diferents mitjansbull Compatibilitat amb muacuteltiples plataformesbull Adaptacioacute drsquoexecucioacute en diferents dispositius

Mitjanccedilant lrsquoIDE FlashDevelop64 combinarem el Llenguatge de Programacioacute Orientat a Objectes ActionScript3 (seguint el patroacute Model-Vista-Controlador el qual manteacute un codi ordenat i estructurat) amb els arxius en format swf creats amb el programa Adobe Animate CC

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

1 Introduccioacute 92 Descripcioacute de lrsquoaplicacioacute 103 Objectius del projecte 12

31 Objectius principals 1232 Objectius secundaris 12

4 Metodologia 135 Planificacioacute 14

51 Fites i dates clau 1452 Diagrama de Gantt 15

6 Proceacutes de treball 167 Arquitectura de lrsquoaplicacioacute 17

71 Client-Servidor 1772 Model-Vista-Controlador 17

8 Anagravelisi pregravevia 1881 Anagravelisi de producte 1882 Anagravelisi de lrsquoaudiegravencia 1883 Anagravelisi de mercat 20

9 Disseny de la Base de Dades 2491 Diagrama Entitat-Relacio (E-R) 2492 Model Relacional 25

11 Arquitectura de la informacioacute 26111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI 26112 Continguts de lrsquoaplicacioacute RECEPTARI 27113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte) 29114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte) 30115 Abre de continguts 31116 Prototips Lo-Fi Wireframes 32117 Prototips Hi-Fi Mockups 34

12 Avaluacioacute de la usabilitat 38121 Modificacions inicials 38122 Evaluacioacute heuriacutestica 38123 Avaluacioacute final 40

13 Projeccioacute a futur 41131 Correccioacute funcionalitats bagravesiques 41132 Millores de lrsquoaplicacioacute 41133 Ampliacioacute de lrsquoaplicacioacute 42

14 Conclusions 44Annex I Lliurables del projecte 45Annex II Codi font 46Annex III Modelatge drsquousuari 49Annex IV Llibre drsquoestil 52Annex V Guia drsquousuari 57Annex VI Bibliografia 63

Iacutendex

Figures

Iacutendex de figures

Figura 1 Diagrama de Gantt 15Figura 2 Model-Vista-Controlador 17Figura 3 Captura de pantalla Easy Menu 20Figura 4 Captura de pantalla Recetario 21Figura 5 Captura de pantalla Planifood 22Figura 6 Diagrama Entitat-Relacioacute 24Figura 7 Arbre de continguts 31Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos) 32Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute) 32Figura 10 Prototip Baixa Fidelitat (Editar Recepta) 32Figura 11 Prototip Baixa Fidelitat (Cercar Recepta) 33Figura 12 Prototip Baixa Fidelitat (Recepta) 33Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute) 33Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari) 34Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute) 34Figura 16 Prototip Alta Fidelitat (Editar Recepta) 35Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta) 35Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes) 36Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes) 36Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute) 37Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute) 37

9

1 Introduccioacute

Sempre he donat importagravencia a dur una alimentacioacute tant sana i equilibrada com variada i plaent I per tant la gestioacute que comporta pensar i elaborar els menuacutes setmanals adients i la recerca de recep-tes necessagraveries per dur-los a terme ha sigut una prioritat en la meva vida

Perograve des del moment en quegrave vaig decidir tornar a estudiar i cursar aquest Grau Multimegravedia de la Universitat Oberta de Catalunya (UOC) compaginat amb una jornada laboral de 8 hores les meves prioritats personals es van veure modificades ja que em vaig trobar amb grans dificultats a lrsquohora de gestionar certs aspectes per manca de temps

Ara amb lrsquoarribada del meu fill he tornat a donar gran importagravencia a lrsquoalimentacioacute perograve no tinc la possibilitat de dedicar-hi el temps necessari i de cap manera el temps que hi dedicava fa uns anys Aquest fet mrsquoha dut a la temagravetica drsquoaquest TFG Quegrave passaria si hagueacutes guardat tota la informacioacute sobre la gestioacute de menuacutes i recerca de receptes que vaig realitzar durant tant de temps

Si beacute avui puc comptar amb lrsquoexperiegravencia que anat guanyant amb els anys mitjanccedilant una aplicacioacute com la que es desenvolupa en aquest projecte (amb la qual es gestionen i srsquoemmagatzemen fagravecil-ment receptes i menuacutes setmanals) podria tenir tota la feina feta

He pogut comprovar que a casa no som els uacutenics que ens trobem en aquest tipus de situacioacute ja que la societat en quegrave vivim comporta una manca de temps generalitzada Per tant aquesta podria ser una aplicacioacute molt pragravectica per a gestionar lrsquoalimentacioacute de les llars i facilitar el dia a dia a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

10

2 Descripcioacute de lrsquoaplicacioacuteSampP en la seva totalitat eacutes una aplicacioacute mogravebil per a la creacioacute i gestioacute de receptes i menuacutes setma-nals dirigida especialment a amateurs del sector i que preteacuten reduiumlr el temps de gestioacute de lrsquousuari (facilitant-ne lrsquouacutes i els serveis) en funcioacute de les dades emmagatzemades en la base de dades i la realitzacioacute automagravetica del llistat de la compra

Principalment lrsquousuari pot crear i guardar les seves progravepies receptes i menuacutes o localitzar-ne de ge-nerats per altres usuaris i utilitzar-los com a tal o modificar-los per adaptar-los a les seves progravepies necessitats

ReceptesPer a la creacioacute drsquouna nova recepta lrsquousuari parteix drsquouna base de dades drsquoaliments drsquoon ha de seleccionar els ingredients necessaris (fruita verdura carn peix espegravecies) i indicar-ne les mesu-res adients En cas que lrsquoingredient no existeixi a la base de dades srsquohi inclouragrave automagraveticament i drsquoaquesta manera tot usuari colmiddotlabora en lrsquoampliacioacute i millora drsquoaquesta

Posteriorment es prossegueix amb lrsquoelaboracioacute de la recepta En aquest punt lrsquousuari ha drsquointroduir pas per pas el procediment a seguir per a dur a terme la recepta En un futur com a millora de futur si hi ha algun ingredient introduiumlt anteriorment el qual no ha estat utilitzat en lrsquoelaboracioacute lrsquoaplicacioacute alertaragrave a lrsquousuari de lrsquoingredient no utilitzat

En acabat srsquoha drsquointroduir una segraverie de caracteriacutestiques principals el tiacutetol de la recepta el nombre de comensals la colmiddotleccioacute a la qual pertany i una valoracioacute per indicar si es tracta drsquouna recepta saludable1

Finalment lrsquousuari teacute la possibilitat drsquoafegir una imatge identificativa de la recepta i se li ha drsquoassig-nar un tipus de privacitat a escollir entre PUacuteBLICA i PRIVADA La privacitat puacuteblica permet lrsquouacutes de la recepta per tots els usuaris de lrsquoaplicacioacute i els autoritza a reutilitzar-la en una altra recepta o a apro-fitar-la com a plantilla per una nova recepta per poder incloure-hi modificacions en funcioacute de criteris propis (variacioacute de mides o ingredients diferents temps de coccioacute)2

Les receptes puacutebliques tenen la possibilitat de ser valorades pels usuaris que nrsquohagin fet uacutes per un cantoacute podran indicar si creuen que eacutes una bona recepta (mrsquoagrada)3 i per altra banda podran seleccionar-les com a preferides3 En un futur tambeacute haurien de poder valorar si es tracta drsquouna recepta saludable4

1 Aquest sistema de valoracioacute es realitzaragrave mitjanccedilant els criteris hipocalograverica calograverica hipercalograverica i quedaragrave representat mitjanccedilant un sistema drsquoetiquetatge verd groc i vermell respectivament

2 Les receptes derivades faran esmena i enllaccedilaran la recepta original i per tant a lrsquoautor drsquoaquesta

3 Afecta la posicioacute de les receptes en el motor de cerca

4 Drsquoaquesta manera srsquoatenuaragrave el resultat drsquouna possible valoracioacute poc objectiva de lrsquoautor

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

11

MenuacutesEls menuacutes soacuten setmanals i estagraven associats a un nuacutemero de setmana anual (en principi el nuacutemero de setmana per la qual srsquoha creat) i es visualitzen en format calendari Cada setmana es divideix diagraveriament en els 2 agravepats principals dinar i sopar amb els quals treballa lrsquousuari

Lrsquousuari escull el nombre de de plats que formaran part de cada agravepat (depenent dels costums progravepis) afegint o eliminant plats els quals srsquoemplenaran mitjanccedilant receptes progravepies o puacutebliques utilitzant el cercador En cas que el menuacute escollit tingui superioritat de plats etiquetats com a no saludables lrsquoaplicacioacute alerta a lrsquousuari de lrsquoeleccioacute drsquouna dieta hipercalograverica

En aquest cas un cop finalitzat el menuacute lrsquoaplicacioacute automagraveticament el definiragrave com a menuacute saluda-ble (o no) en funcioacute de les receptes utilitzades i lrsquousuari li atorgaragrave el tipus de privacitat dessitjada En cas que lrsquousuari no generi un nou menuacute sinoacute que nrsquoutilitzi un de puacuteblic de la base de dades aquest igual que succeeix amb les receptes podragrave valorar-lo io utilitzar-lo com a plantilla per poder modifi-car-ne alguns aspectes segons preferegravencies

CerquesTant la cerca de receptes com la cerca de menuacutes ja elaborats es du a terme a partir de diferents filtres a escollir per lrsquousuari en el cas de les receptes drsquoacord amb lrsquoautor el tipus de plat (colmiddotlec-cions) ingredients io nuacutemero de comenccedilals i en el cas dels menuacutes drsquoacord amb autor io el nuacutem de setmana

Llistat de compraLrsquoaplicacioacute realitzaragrave en funcioacute del menuacute setmanal el llistat de la compra el qual podragrave ser modificat per lrsquousuari segons conveniegravenciaPodragrave eliminar elements que ja tingui a casa o afegir-ne de nous ja siguin alimentaris o noLa funcioacutenalitat del llistat de compra srsquoampliaragrave oferint la possibilitat a lrsquousuari de ser gestionada per alguna empresa dedicada a la realitzacioacute de compres i enviament a domicili

Caracteriacutestiques tegravecniquesPer a dur a terme el projecte les tecnologies utilitzades estan relacionades amb la Plataforma Flash ja que aquesta plataforma eacutes avui en dia un referent en la creacioacute drsquoAplicacions Rich Media (ARM) gragravecies a les seves capacitats

bull Enfocament al suport de diferents mitjansbull Compatibilitat amb muacuteltiples plataformesbull Adaptacioacute drsquoexecucioacute en diferents dispositius

Mitjanccedilant lrsquoIDE FlashDevelop64 combinarem el Llenguatge de Programacioacute Orientat a Objectes ActionScript3 (seguint el patroacute Model-Vista-Controlador el qual manteacute un codi ordenat i estructurat) amb els arxius en format swf creats amb el programa Adobe Animate CC

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

Figures

Iacutendex de figures

Figura 1 Diagrama de Gantt 15Figura 2 Model-Vista-Controlador 17Figura 3 Captura de pantalla Easy Menu 20Figura 4 Captura de pantalla Recetario 21Figura 5 Captura de pantalla Planifood 22Figura 6 Diagrama Entitat-Relacioacute 24Figura 7 Arbre de continguts 31Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos) 32Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute) 32Figura 10 Prototip Baixa Fidelitat (Editar Recepta) 32Figura 11 Prototip Baixa Fidelitat (Cercar Recepta) 33Figura 12 Prototip Baixa Fidelitat (Recepta) 33Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute) 33Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari) 34Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute) 34Figura 16 Prototip Alta Fidelitat (Editar Recepta) 35Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta) 35Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes) 36Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes) 36Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute) 37Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute) 37

9

1 Introduccioacute

Sempre he donat importagravencia a dur una alimentacioacute tant sana i equilibrada com variada i plaent I per tant la gestioacute que comporta pensar i elaborar els menuacutes setmanals adients i la recerca de recep-tes necessagraveries per dur-los a terme ha sigut una prioritat en la meva vida

Perograve des del moment en quegrave vaig decidir tornar a estudiar i cursar aquest Grau Multimegravedia de la Universitat Oberta de Catalunya (UOC) compaginat amb una jornada laboral de 8 hores les meves prioritats personals es van veure modificades ja que em vaig trobar amb grans dificultats a lrsquohora de gestionar certs aspectes per manca de temps

Ara amb lrsquoarribada del meu fill he tornat a donar gran importagravencia a lrsquoalimentacioacute perograve no tinc la possibilitat de dedicar-hi el temps necessari i de cap manera el temps que hi dedicava fa uns anys Aquest fet mrsquoha dut a la temagravetica drsquoaquest TFG Quegrave passaria si hagueacutes guardat tota la informacioacute sobre la gestioacute de menuacutes i recerca de receptes que vaig realitzar durant tant de temps

Si beacute avui puc comptar amb lrsquoexperiegravencia que anat guanyant amb els anys mitjanccedilant una aplicacioacute com la que es desenvolupa en aquest projecte (amb la qual es gestionen i srsquoemmagatzemen fagravecil-ment receptes i menuacutes setmanals) podria tenir tota la feina feta

He pogut comprovar que a casa no som els uacutenics que ens trobem en aquest tipus de situacioacute ja que la societat en quegrave vivim comporta una manca de temps generalitzada Per tant aquesta podria ser una aplicacioacute molt pragravectica per a gestionar lrsquoalimentacioacute de les llars i facilitar el dia a dia a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

10

2 Descripcioacute de lrsquoaplicacioacuteSampP en la seva totalitat eacutes una aplicacioacute mogravebil per a la creacioacute i gestioacute de receptes i menuacutes setma-nals dirigida especialment a amateurs del sector i que preteacuten reduiumlr el temps de gestioacute de lrsquousuari (facilitant-ne lrsquouacutes i els serveis) en funcioacute de les dades emmagatzemades en la base de dades i la realitzacioacute automagravetica del llistat de la compra

Principalment lrsquousuari pot crear i guardar les seves progravepies receptes i menuacutes o localitzar-ne de ge-nerats per altres usuaris i utilitzar-los com a tal o modificar-los per adaptar-los a les seves progravepies necessitats

ReceptesPer a la creacioacute drsquouna nova recepta lrsquousuari parteix drsquouna base de dades drsquoaliments drsquoon ha de seleccionar els ingredients necessaris (fruita verdura carn peix espegravecies) i indicar-ne les mesu-res adients En cas que lrsquoingredient no existeixi a la base de dades srsquohi inclouragrave automagraveticament i drsquoaquesta manera tot usuari colmiddotlabora en lrsquoampliacioacute i millora drsquoaquesta

Posteriorment es prossegueix amb lrsquoelaboracioacute de la recepta En aquest punt lrsquousuari ha drsquointroduir pas per pas el procediment a seguir per a dur a terme la recepta En un futur com a millora de futur si hi ha algun ingredient introduiumlt anteriorment el qual no ha estat utilitzat en lrsquoelaboracioacute lrsquoaplicacioacute alertaragrave a lrsquousuari de lrsquoingredient no utilitzat

En acabat srsquoha drsquointroduir una segraverie de caracteriacutestiques principals el tiacutetol de la recepta el nombre de comensals la colmiddotleccioacute a la qual pertany i una valoracioacute per indicar si es tracta drsquouna recepta saludable1

Finalment lrsquousuari teacute la possibilitat drsquoafegir una imatge identificativa de la recepta i se li ha drsquoassig-nar un tipus de privacitat a escollir entre PUacuteBLICA i PRIVADA La privacitat puacuteblica permet lrsquouacutes de la recepta per tots els usuaris de lrsquoaplicacioacute i els autoritza a reutilitzar-la en una altra recepta o a apro-fitar-la com a plantilla per una nova recepta per poder incloure-hi modificacions en funcioacute de criteris propis (variacioacute de mides o ingredients diferents temps de coccioacute)2

Les receptes puacutebliques tenen la possibilitat de ser valorades pels usuaris que nrsquohagin fet uacutes per un cantoacute podran indicar si creuen que eacutes una bona recepta (mrsquoagrada)3 i per altra banda podran seleccionar-les com a preferides3 En un futur tambeacute haurien de poder valorar si es tracta drsquouna recepta saludable4

1 Aquest sistema de valoracioacute es realitzaragrave mitjanccedilant els criteris hipocalograverica calograverica hipercalograverica i quedaragrave representat mitjanccedilant un sistema drsquoetiquetatge verd groc i vermell respectivament

2 Les receptes derivades faran esmena i enllaccedilaran la recepta original i per tant a lrsquoautor drsquoaquesta

3 Afecta la posicioacute de les receptes en el motor de cerca

4 Drsquoaquesta manera srsquoatenuaragrave el resultat drsquouna possible valoracioacute poc objectiva de lrsquoautor

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

11

MenuacutesEls menuacutes soacuten setmanals i estagraven associats a un nuacutemero de setmana anual (en principi el nuacutemero de setmana per la qual srsquoha creat) i es visualitzen en format calendari Cada setmana es divideix diagraveriament en els 2 agravepats principals dinar i sopar amb els quals treballa lrsquousuari

Lrsquousuari escull el nombre de de plats que formaran part de cada agravepat (depenent dels costums progravepis) afegint o eliminant plats els quals srsquoemplenaran mitjanccedilant receptes progravepies o puacutebliques utilitzant el cercador En cas que el menuacute escollit tingui superioritat de plats etiquetats com a no saludables lrsquoaplicacioacute alerta a lrsquousuari de lrsquoeleccioacute drsquouna dieta hipercalograverica

En aquest cas un cop finalitzat el menuacute lrsquoaplicacioacute automagraveticament el definiragrave com a menuacute saluda-ble (o no) en funcioacute de les receptes utilitzades i lrsquousuari li atorgaragrave el tipus de privacitat dessitjada En cas que lrsquousuari no generi un nou menuacute sinoacute que nrsquoutilitzi un de puacuteblic de la base de dades aquest igual que succeeix amb les receptes podragrave valorar-lo io utilitzar-lo com a plantilla per poder modifi-car-ne alguns aspectes segons preferegravencies

CerquesTant la cerca de receptes com la cerca de menuacutes ja elaborats es du a terme a partir de diferents filtres a escollir per lrsquousuari en el cas de les receptes drsquoacord amb lrsquoautor el tipus de plat (colmiddotlec-cions) ingredients io nuacutemero de comenccedilals i en el cas dels menuacutes drsquoacord amb autor io el nuacutem de setmana

Llistat de compraLrsquoaplicacioacute realitzaragrave en funcioacute del menuacute setmanal el llistat de la compra el qual podragrave ser modificat per lrsquousuari segons conveniegravenciaPodragrave eliminar elements que ja tingui a casa o afegir-ne de nous ja siguin alimentaris o noLa funcioacutenalitat del llistat de compra srsquoampliaragrave oferint la possibilitat a lrsquousuari de ser gestionada per alguna empresa dedicada a la realitzacioacute de compres i enviament a domicili

Caracteriacutestiques tegravecniquesPer a dur a terme el projecte les tecnologies utilitzades estan relacionades amb la Plataforma Flash ja que aquesta plataforma eacutes avui en dia un referent en la creacioacute drsquoAplicacions Rich Media (ARM) gragravecies a les seves capacitats

bull Enfocament al suport de diferents mitjansbull Compatibilitat amb muacuteltiples plataformesbull Adaptacioacute drsquoexecucioacute en diferents dispositius

Mitjanccedilant lrsquoIDE FlashDevelop64 combinarem el Llenguatge de Programacioacute Orientat a Objectes ActionScript3 (seguint el patroacute Model-Vista-Controlador el qual manteacute un codi ordenat i estructurat) amb els arxius en format swf creats amb el programa Adobe Animate CC

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

9

1 Introduccioacute

Sempre he donat importagravencia a dur una alimentacioacute tant sana i equilibrada com variada i plaent I per tant la gestioacute que comporta pensar i elaborar els menuacutes setmanals adients i la recerca de recep-tes necessagraveries per dur-los a terme ha sigut una prioritat en la meva vida

Perograve des del moment en quegrave vaig decidir tornar a estudiar i cursar aquest Grau Multimegravedia de la Universitat Oberta de Catalunya (UOC) compaginat amb una jornada laboral de 8 hores les meves prioritats personals es van veure modificades ja que em vaig trobar amb grans dificultats a lrsquohora de gestionar certs aspectes per manca de temps

Ara amb lrsquoarribada del meu fill he tornat a donar gran importagravencia a lrsquoalimentacioacute perograve no tinc la possibilitat de dedicar-hi el temps necessari i de cap manera el temps que hi dedicava fa uns anys Aquest fet mrsquoha dut a la temagravetica drsquoaquest TFG Quegrave passaria si hagueacutes guardat tota la informacioacute sobre la gestioacute de menuacutes i recerca de receptes que vaig realitzar durant tant de temps

Si beacute avui puc comptar amb lrsquoexperiegravencia que anat guanyant amb els anys mitjanccedilant una aplicacioacute com la que es desenvolupa en aquest projecte (amb la qual es gestionen i srsquoemmagatzemen fagravecil-ment receptes i menuacutes setmanals) podria tenir tota la feina feta

He pogut comprovar que a casa no som els uacutenics que ens trobem en aquest tipus de situacioacute ja que la societat en quegrave vivim comporta una manca de temps generalitzada Per tant aquesta podria ser una aplicacioacute molt pragravectica per a gestionar lrsquoalimentacioacute de les llars i facilitar el dia a dia a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

10

2 Descripcioacute de lrsquoaplicacioacuteSampP en la seva totalitat eacutes una aplicacioacute mogravebil per a la creacioacute i gestioacute de receptes i menuacutes setma-nals dirigida especialment a amateurs del sector i que preteacuten reduiumlr el temps de gestioacute de lrsquousuari (facilitant-ne lrsquouacutes i els serveis) en funcioacute de les dades emmagatzemades en la base de dades i la realitzacioacute automagravetica del llistat de la compra

Principalment lrsquousuari pot crear i guardar les seves progravepies receptes i menuacutes o localitzar-ne de ge-nerats per altres usuaris i utilitzar-los com a tal o modificar-los per adaptar-los a les seves progravepies necessitats

ReceptesPer a la creacioacute drsquouna nova recepta lrsquousuari parteix drsquouna base de dades drsquoaliments drsquoon ha de seleccionar els ingredients necessaris (fruita verdura carn peix espegravecies) i indicar-ne les mesu-res adients En cas que lrsquoingredient no existeixi a la base de dades srsquohi inclouragrave automagraveticament i drsquoaquesta manera tot usuari colmiddotlabora en lrsquoampliacioacute i millora drsquoaquesta

Posteriorment es prossegueix amb lrsquoelaboracioacute de la recepta En aquest punt lrsquousuari ha drsquointroduir pas per pas el procediment a seguir per a dur a terme la recepta En un futur com a millora de futur si hi ha algun ingredient introduiumlt anteriorment el qual no ha estat utilitzat en lrsquoelaboracioacute lrsquoaplicacioacute alertaragrave a lrsquousuari de lrsquoingredient no utilitzat

En acabat srsquoha drsquointroduir una segraverie de caracteriacutestiques principals el tiacutetol de la recepta el nombre de comensals la colmiddotleccioacute a la qual pertany i una valoracioacute per indicar si es tracta drsquouna recepta saludable1

Finalment lrsquousuari teacute la possibilitat drsquoafegir una imatge identificativa de la recepta i se li ha drsquoassig-nar un tipus de privacitat a escollir entre PUacuteBLICA i PRIVADA La privacitat puacuteblica permet lrsquouacutes de la recepta per tots els usuaris de lrsquoaplicacioacute i els autoritza a reutilitzar-la en una altra recepta o a apro-fitar-la com a plantilla per una nova recepta per poder incloure-hi modificacions en funcioacute de criteris propis (variacioacute de mides o ingredients diferents temps de coccioacute)2

Les receptes puacutebliques tenen la possibilitat de ser valorades pels usuaris que nrsquohagin fet uacutes per un cantoacute podran indicar si creuen que eacutes una bona recepta (mrsquoagrada)3 i per altra banda podran seleccionar-les com a preferides3 En un futur tambeacute haurien de poder valorar si es tracta drsquouna recepta saludable4

1 Aquest sistema de valoracioacute es realitzaragrave mitjanccedilant els criteris hipocalograverica calograverica hipercalograverica i quedaragrave representat mitjanccedilant un sistema drsquoetiquetatge verd groc i vermell respectivament

2 Les receptes derivades faran esmena i enllaccedilaran la recepta original i per tant a lrsquoautor drsquoaquesta

3 Afecta la posicioacute de les receptes en el motor de cerca

4 Drsquoaquesta manera srsquoatenuaragrave el resultat drsquouna possible valoracioacute poc objectiva de lrsquoautor

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

11

MenuacutesEls menuacutes soacuten setmanals i estagraven associats a un nuacutemero de setmana anual (en principi el nuacutemero de setmana per la qual srsquoha creat) i es visualitzen en format calendari Cada setmana es divideix diagraveriament en els 2 agravepats principals dinar i sopar amb els quals treballa lrsquousuari

Lrsquousuari escull el nombre de de plats que formaran part de cada agravepat (depenent dels costums progravepis) afegint o eliminant plats els quals srsquoemplenaran mitjanccedilant receptes progravepies o puacutebliques utilitzant el cercador En cas que el menuacute escollit tingui superioritat de plats etiquetats com a no saludables lrsquoaplicacioacute alerta a lrsquousuari de lrsquoeleccioacute drsquouna dieta hipercalograverica

En aquest cas un cop finalitzat el menuacute lrsquoaplicacioacute automagraveticament el definiragrave com a menuacute saluda-ble (o no) en funcioacute de les receptes utilitzades i lrsquousuari li atorgaragrave el tipus de privacitat dessitjada En cas que lrsquousuari no generi un nou menuacute sinoacute que nrsquoutilitzi un de puacuteblic de la base de dades aquest igual que succeeix amb les receptes podragrave valorar-lo io utilitzar-lo com a plantilla per poder modifi-car-ne alguns aspectes segons preferegravencies

CerquesTant la cerca de receptes com la cerca de menuacutes ja elaborats es du a terme a partir de diferents filtres a escollir per lrsquousuari en el cas de les receptes drsquoacord amb lrsquoautor el tipus de plat (colmiddotlec-cions) ingredients io nuacutemero de comenccedilals i en el cas dels menuacutes drsquoacord amb autor io el nuacutem de setmana

Llistat de compraLrsquoaplicacioacute realitzaragrave en funcioacute del menuacute setmanal el llistat de la compra el qual podragrave ser modificat per lrsquousuari segons conveniegravenciaPodragrave eliminar elements que ja tingui a casa o afegir-ne de nous ja siguin alimentaris o noLa funcioacutenalitat del llistat de compra srsquoampliaragrave oferint la possibilitat a lrsquousuari de ser gestionada per alguna empresa dedicada a la realitzacioacute de compres i enviament a domicili

Caracteriacutestiques tegravecniquesPer a dur a terme el projecte les tecnologies utilitzades estan relacionades amb la Plataforma Flash ja que aquesta plataforma eacutes avui en dia un referent en la creacioacute drsquoAplicacions Rich Media (ARM) gragravecies a les seves capacitats

bull Enfocament al suport de diferents mitjansbull Compatibilitat amb muacuteltiples plataformesbull Adaptacioacute drsquoexecucioacute en diferents dispositius

Mitjanccedilant lrsquoIDE FlashDevelop64 combinarem el Llenguatge de Programacioacute Orientat a Objectes ActionScript3 (seguint el patroacute Model-Vista-Controlador el qual manteacute un codi ordenat i estructurat) amb els arxius en format swf creats amb el programa Adobe Animate CC

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

10

2 Descripcioacute de lrsquoaplicacioacuteSampP en la seva totalitat eacutes una aplicacioacute mogravebil per a la creacioacute i gestioacute de receptes i menuacutes setma-nals dirigida especialment a amateurs del sector i que preteacuten reduiumlr el temps de gestioacute de lrsquousuari (facilitant-ne lrsquouacutes i els serveis) en funcioacute de les dades emmagatzemades en la base de dades i la realitzacioacute automagravetica del llistat de la compra

Principalment lrsquousuari pot crear i guardar les seves progravepies receptes i menuacutes o localitzar-ne de ge-nerats per altres usuaris i utilitzar-los com a tal o modificar-los per adaptar-los a les seves progravepies necessitats

ReceptesPer a la creacioacute drsquouna nova recepta lrsquousuari parteix drsquouna base de dades drsquoaliments drsquoon ha de seleccionar els ingredients necessaris (fruita verdura carn peix espegravecies) i indicar-ne les mesu-res adients En cas que lrsquoingredient no existeixi a la base de dades srsquohi inclouragrave automagraveticament i drsquoaquesta manera tot usuari colmiddotlabora en lrsquoampliacioacute i millora drsquoaquesta

Posteriorment es prossegueix amb lrsquoelaboracioacute de la recepta En aquest punt lrsquousuari ha drsquointroduir pas per pas el procediment a seguir per a dur a terme la recepta En un futur com a millora de futur si hi ha algun ingredient introduiumlt anteriorment el qual no ha estat utilitzat en lrsquoelaboracioacute lrsquoaplicacioacute alertaragrave a lrsquousuari de lrsquoingredient no utilitzat

En acabat srsquoha drsquointroduir una segraverie de caracteriacutestiques principals el tiacutetol de la recepta el nombre de comensals la colmiddotleccioacute a la qual pertany i una valoracioacute per indicar si es tracta drsquouna recepta saludable1

Finalment lrsquousuari teacute la possibilitat drsquoafegir una imatge identificativa de la recepta i se li ha drsquoassig-nar un tipus de privacitat a escollir entre PUacuteBLICA i PRIVADA La privacitat puacuteblica permet lrsquouacutes de la recepta per tots els usuaris de lrsquoaplicacioacute i els autoritza a reutilitzar-la en una altra recepta o a apro-fitar-la com a plantilla per una nova recepta per poder incloure-hi modificacions en funcioacute de criteris propis (variacioacute de mides o ingredients diferents temps de coccioacute)2

Les receptes puacutebliques tenen la possibilitat de ser valorades pels usuaris que nrsquohagin fet uacutes per un cantoacute podran indicar si creuen que eacutes una bona recepta (mrsquoagrada)3 i per altra banda podran seleccionar-les com a preferides3 En un futur tambeacute haurien de poder valorar si es tracta drsquouna recepta saludable4

1 Aquest sistema de valoracioacute es realitzaragrave mitjanccedilant els criteris hipocalograverica calograverica hipercalograverica i quedaragrave representat mitjanccedilant un sistema drsquoetiquetatge verd groc i vermell respectivament

2 Les receptes derivades faran esmena i enllaccedilaran la recepta original i per tant a lrsquoautor drsquoaquesta

3 Afecta la posicioacute de les receptes en el motor de cerca

4 Drsquoaquesta manera srsquoatenuaragrave el resultat drsquouna possible valoracioacute poc objectiva de lrsquoautor

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

11

MenuacutesEls menuacutes soacuten setmanals i estagraven associats a un nuacutemero de setmana anual (en principi el nuacutemero de setmana per la qual srsquoha creat) i es visualitzen en format calendari Cada setmana es divideix diagraveriament en els 2 agravepats principals dinar i sopar amb els quals treballa lrsquousuari

Lrsquousuari escull el nombre de de plats que formaran part de cada agravepat (depenent dels costums progravepis) afegint o eliminant plats els quals srsquoemplenaran mitjanccedilant receptes progravepies o puacutebliques utilitzant el cercador En cas que el menuacute escollit tingui superioritat de plats etiquetats com a no saludables lrsquoaplicacioacute alerta a lrsquousuari de lrsquoeleccioacute drsquouna dieta hipercalograverica

En aquest cas un cop finalitzat el menuacute lrsquoaplicacioacute automagraveticament el definiragrave com a menuacute saluda-ble (o no) en funcioacute de les receptes utilitzades i lrsquousuari li atorgaragrave el tipus de privacitat dessitjada En cas que lrsquousuari no generi un nou menuacute sinoacute que nrsquoutilitzi un de puacuteblic de la base de dades aquest igual que succeeix amb les receptes podragrave valorar-lo io utilitzar-lo com a plantilla per poder modifi-car-ne alguns aspectes segons preferegravencies

CerquesTant la cerca de receptes com la cerca de menuacutes ja elaborats es du a terme a partir de diferents filtres a escollir per lrsquousuari en el cas de les receptes drsquoacord amb lrsquoautor el tipus de plat (colmiddotlec-cions) ingredients io nuacutemero de comenccedilals i en el cas dels menuacutes drsquoacord amb autor io el nuacutem de setmana

Llistat de compraLrsquoaplicacioacute realitzaragrave en funcioacute del menuacute setmanal el llistat de la compra el qual podragrave ser modificat per lrsquousuari segons conveniegravenciaPodragrave eliminar elements que ja tingui a casa o afegir-ne de nous ja siguin alimentaris o noLa funcioacutenalitat del llistat de compra srsquoampliaragrave oferint la possibilitat a lrsquousuari de ser gestionada per alguna empresa dedicada a la realitzacioacute de compres i enviament a domicili

Caracteriacutestiques tegravecniquesPer a dur a terme el projecte les tecnologies utilitzades estan relacionades amb la Plataforma Flash ja que aquesta plataforma eacutes avui en dia un referent en la creacioacute drsquoAplicacions Rich Media (ARM) gragravecies a les seves capacitats

bull Enfocament al suport de diferents mitjansbull Compatibilitat amb muacuteltiples plataformesbull Adaptacioacute drsquoexecucioacute en diferents dispositius

Mitjanccedilant lrsquoIDE FlashDevelop64 combinarem el Llenguatge de Programacioacute Orientat a Objectes ActionScript3 (seguint el patroacute Model-Vista-Controlador el qual manteacute un codi ordenat i estructurat) amb els arxius en format swf creats amb el programa Adobe Animate CC

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

11

MenuacutesEls menuacutes soacuten setmanals i estagraven associats a un nuacutemero de setmana anual (en principi el nuacutemero de setmana per la qual srsquoha creat) i es visualitzen en format calendari Cada setmana es divideix diagraveriament en els 2 agravepats principals dinar i sopar amb els quals treballa lrsquousuari

Lrsquousuari escull el nombre de de plats que formaran part de cada agravepat (depenent dels costums progravepis) afegint o eliminant plats els quals srsquoemplenaran mitjanccedilant receptes progravepies o puacutebliques utilitzant el cercador En cas que el menuacute escollit tingui superioritat de plats etiquetats com a no saludables lrsquoaplicacioacute alerta a lrsquousuari de lrsquoeleccioacute drsquouna dieta hipercalograverica

En aquest cas un cop finalitzat el menuacute lrsquoaplicacioacute automagraveticament el definiragrave com a menuacute saluda-ble (o no) en funcioacute de les receptes utilitzades i lrsquousuari li atorgaragrave el tipus de privacitat dessitjada En cas que lrsquousuari no generi un nou menuacute sinoacute que nrsquoutilitzi un de puacuteblic de la base de dades aquest igual que succeeix amb les receptes podragrave valorar-lo io utilitzar-lo com a plantilla per poder modifi-car-ne alguns aspectes segons preferegravencies

CerquesTant la cerca de receptes com la cerca de menuacutes ja elaborats es du a terme a partir de diferents filtres a escollir per lrsquousuari en el cas de les receptes drsquoacord amb lrsquoautor el tipus de plat (colmiddotlec-cions) ingredients io nuacutemero de comenccedilals i en el cas dels menuacutes drsquoacord amb autor io el nuacutem de setmana

Llistat de compraLrsquoaplicacioacute realitzaragrave en funcioacute del menuacute setmanal el llistat de la compra el qual podragrave ser modificat per lrsquousuari segons conveniegravenciaPodragrave eliminar elements que ja tingui a casa o afegir-ne de nous ja siguin alimentaris o noLa funcioacutenalitat del llistat de compra srsquoampliaragrave oferint la possibilitat a lrsquousuari de ser gestionada per alguna empresa dedicada a la realitzacioacute de compres i enviament a domicili

Caracteriacutestiques tegravecniquesPer a dur a terme el projecte les tecnologies utilitzades estan relacionades amb la Plataforma Flash ja que aquesta plataforma eacutes avui en dia un referent en la creacioacute drsquoAplicacions Rich Media (ARM) gragravecies a les seves capacitats

bull Enfocament al suport de diferents mitjansbull Compatibilitat amb muacuteltiples plataformesbull Adaptacioacute drsquoexecucioacute en diferents dispositius

Mitjanccedilant lrsquoIDE FlashDevelop64 combinarem el Llenguatge de Programacioacute Orientat a Objectes ActionScript3 (seguint el patroacute Model-Vista-Controlador el qual manteacute un codi ordenat i estructurat) amb els arxius en format swf creats amb el programa Adobe Animate CC

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

12

3 Objectius del projecte

Lrsquoobjectiu drsquoaquest TFG eacutes dissenyar i desenvolupar una part de lrsquoaplicacioacute definida anteriorment En concret aquest projecte tractaragrave especiacuteficament la gestioacute drsquousuari i el desenvolupament del receptari

31 Objectius principalsEls objectius clau del TFG soacuten

bull Assolir la realitzacioacute de tota la gestioacute drsquousuari necessagraveria per al desenvolupament de lrsquoappbull Assolir la realitzacioacute de tota la gestioacute del receptari de lrsquoappbull Assolir el compliment de fites i dates clau del projectebull Assolir un disseny fagravecil i intuiumltiu per a la realitzacioacute de les funcions de lrsquoaplicacioacutebull Assolir una bona gestioacute de la Base de Dades

32 Objectius secundarisEls objectius addicionals del TFG soacuten

bull Minimitzar els efectes de les possibles incidegravencies durant el proceacutes bull Minimitzar problemes drsquoaccessibilitatbull Experiegravencia drsquousuaribull Crear una aplicacioacute responsive multiplataforma i multi dispositiu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

13

4 MetodologiaLrsquoelaboracioacute drsquoaquest projecte es basa principalment en la metodologia del disseny centrat en lrsquousuari (DCU) i per conseguumlent en la usabilitat de lrsquoaplicacioacute i lrsquoenfocament del projecte en cascada retroalimentada

La metodologia treballada (DCU) enfoca a lrsquousuari en el nucli del proceacutes des de lrsquoetapa de disseny i desenvolupa les diferents fases del projecte al seu voltant Drsquoaquesta manera es potegravencia la facilitat drsquouacutes de lrsquoaplicacioacute mitjanccedilant la comunicacioacute i la interaccioacute amb lrsquousuari amb lrsquoobjectiu de proporcio-nar una aplicacioacute intuiumltiva en quegrave lrsquousuari se senti cogravemode i folgat i no tingui problemes per a dur a terme la finalitat de lrsquoeina

La usabilitat de lrsquoaplicacioacute srsquooptimitza mitjanccedilant una avaluacioacute constant de totes les etapes que es duen a terme especialment la fase de prototipatge ja que els resultats drsquoaquesta avaluacioacute poden representar un retorn a la fase drsquoanagravelisi per a una millora de lrsquoaplicacioacute

Tot i que hi ha certes etapes al llarg del proceacutes que es podrien o srsquohaurien drsquoefectuar en paralmiddotlel en aquest cas ja que tota la feina eacutes realitzada per una uacutenica persona tot el proceacutes seragrave executat de forma lineal

Tanmateix aquest TFG tambeacute basa el model de treball en lrsquoenfocament en cascada retroalimentada dit drsquoaltra manera el proceacutes permet tornar enrere si es detecten problemes des de qualsevol etapa de projecte per tal de realitzar els ajustos necessaris i corregir-ne els errors localitzats

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

14

5 Planificacioacute

51 Fites i dates clau

Proves drsquoAvaluacioacute Continuada (PACs)PAC 1 06032018 PAC 2 04042018 PAC 3 13052018 Lliurament final 11062018

Memograveria de ProjectePart 1 06032018Part 2 04042018Part 3 13052018Versioacute final 01062018

Fases del ProjecteFase Introduccioacute 04032018Fase Planificacioacute 06032018 Fase Anagravelisis 11032018Fase Disseny 29032018Fase Avaluacioacute 02042018Fase Desenvolupament 25052018Fase Avaluacioacute Final 27052018

PresentacionsPresentacioacute en viacutedeo (Defensa de Projecte) 07062018Presentacioacute lliure (Presentacioacute Visual-Escrita) 10062018

En la planificacioacute srsquoha tingut en compte temps que srsquohauragrave de dedicar a la realitzacioacute drsquoaltres funcions que impediran la continuitat del projecte Concretarment hi ha representats dos talls en el proceacutes Del 21042018 fins al 29042018 Del 13052018 fins al 18052018

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

15

52 Diagrama de Gantt

Figura 2 Diagrama de Gantt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

16

6 Proceacutes de treballEls continguts drsquoaquest projecte es centren en el disseny i el desenvolupament de lrsquoaplicacioacute SampP i la presentacioacute detallada del proceacutes en aquest document de Memograveria

Un cop realitzada la presentacioacute de lrsquoaplicacioacute i definides la metodologia i la planificacioacute amb quegrave es duragrave a terme el projecte ens centrem en lrsquoanagravelisi pregravevia En aquest punt srsquoanalitza per un cantoacute el producte per altra banda el mercat actual i la possible competegravencia i finalment el puacuteblic objectiu o target

A partir drsquoaquesta anagravelisi pregravevia es desenvolupen les fases de disseny en primer lloc el disseny con-ceptual i de continguts de lrsquoaplicacioacute i posteriorment el disseny visual drsquoaquesta que teacute com a base les pautes indicades en el llibre drsquoestil) Aquesta etapa de disseny comporta una avaluacioacute constant per tal de corregir errors i tornar si eacutes necessari a la fase drsquoanagravelisi per tal de millorar-ne la usabilitat

Tot seguit tenint lrsquoestructura i la imatge de lrsquoaplicacioacute avaluades positivament passem a la fase de produccioacute de lrsquoaplicacioacute mitjanccedilant la plataforma Flash Aquesta fase compregraven principalment el des-envolupament del codi (navegacioacute entre pagravegines funcionalitat de cada pagravegina implementacioacute de la BBDD) dividint lrsquoaplicacioacute en 4 grans blocs - Gestioacute drsquousuaris - Receptari - Gestioacute de menuacutes - Automatitzacioacute llistat compraDels quals en aquest projecte es duran a terme els dos primers

A continuacioacute lrsquoaplicacioacute estaragrave sotmesa a una nova avaluacioacute final per tal de comprovar-ne el fun-cionament i finalment com a uacuteltim punt drsquoaquesta memograveria srsquoenumeren les conclusions que srsquohan assolit al llarg de tot el proceacutes

El projecte finalitzaragrave amb la presentacioacute i defensa de lrsquoaplicacioacute per medis visuals i escrits

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

17

7 Arquitectura de lrsquoaplicacioacuteEn aquest projecte es tenen en compte principalment dos patrons drsquoarquitectura el patroacute drsquoarqui-tectura global Client-Servidor i el patroacute drsquoarquitectura Model-Vista-Controlador

71 Client-ServidorLrsquoestructura descentralitzada del Sistema drsquoInformacioacute Client-Servidor permet un processament coo-peratiu de la informacioacute mitjanccedilant processadors on el client solicita els serveis del servidor a traveacutes de solicituds

Costat ClientEn el costat client srsquoutilitza la Plataforma Flash amb el llenguatge de programacioacute Action Script 3 que eacutes el llenguatge de programacioacute orientat a objectes progravepi de la plataforma i que estagrave basat en lrsquoestagravendard ECMAScript

Costat ServidorEn el costat servidor srsquoutilitza una base de dades relacional MySQL (motor per defecte MyISAM i administrada mitjanccedilant PhpMyAdmin) gestionat pel llenguatge de programacioacute PHP Tambeacute hi ha ubicat altres elements succeptibles de modificacioacute com per exemple les imatges o els arxius refe-rents a lrsquoajuda de lrsquoaplicacioacute

72 Model-Vista-ControladorEn la programacioacute orientada a objectes el patroacute Model-Vista-Controlador (MVC) divideix lrsquoarquitectu-ra del programari en tres mograveduls el Model que engloba totes les classes participants la Vista que equival a la interfiacutecie drsquousuari i el Controlador mitjanccedilant el qual es controlen els esdeveniments i comunicacions entre mograveduls

La finalitat drsquoaquesta arquitectura eacutes permetre la reutilitzacioacute de codi i per tant facilitar el desenvo-lupament i el manteniment posterior de lrsquoaplicacioacute mitjanccedilant un codi net i ordenat

Figura 1 Model-Vista-Controlador

MODEL VISTACONTROLADOR

USUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

18

8 Anagravelisi pregravevia

En aquesta etapa es reuneix la informacioacute necessagraveria sobre els objectius de lrsquoaplicacioacute les caracte-riacutestiques principals del puacuteblic objectiu i el mercat actual

81 Anagravelisi de producte

ObjectiusLa finalitat de lrsquoaplicacioacute eacutes que lrsquousuari (amb el temps) tingui dissenyada la base drsquoun calendari de menuacutes anual fet a mida

Els objectius principals de lrsquoaplicacioacute soacutenbull Reduir el temps necessari per a la planificacioacute del menuacute setmanalbull Millorar i facilitar la gestioacute del proceacutes drsquoalimentacioacute quotidiagrave

Els objectius secundarisbull Organitzacioacute i intercanvi de receptesbull Millorar la diversitat i la qualitat dels menuacutes quotidians

ContingutEl contingut de lrsquoaplicacioacute es basa en

bull Gestioacute de tempsbull Gestioacute drsquoinformacioacutebull Intercanvi drsquoinformacioacute

Especificacions tegravecniquesbull Interfiacutecie gragravefica drsquousuari GUI (graphical user interface) de pantalla tagravectilbull Aplicacioacute multimegravediabull Aplicacioacute mutliplataformabull Aplicacioacute multidispositiubull Connexioacute a BBDD externa

82 Anagravelisi de lrsquoaudiegravencia

EdatLrsquoaplicacioacute estagrave dirigida principalment al puacuteblic adult sense un rang drsquoedat determinat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

19

GegravenereSampP estagrave dissenyada per ambdoacutes gegraveneres perograve el factor sociocultural actual implica que el puacuteblic potencial en aquest cas eacutes femeniacute

Necessitats i motivacionsSampP estagrave adreccedilat a aquelles persones que planifiquen lalimentacioacute de casa seva principalment a lusuari encarregat didear els menuacutes i planificar receptes Se centra especialment en aquelles per-sones que no tinguin temps per poder realitzar aquestes gestions o que busquin optimitzar-les per tal de gaudir de meacutes temps doci

Tambeacute estagrave dirigida a aquelles persones que els agradi el moacuten de la cuina i per tant srsquointeressin per una eina que realitzi funcions especiacutefiques de receptari i les ampliiuml en altres agravembits

Nivell de coneixements tegravecnicsAquest apartat eacutes una bastant heterogeni ja que trobem per un cantoacute usuaris amb un gran nivell i experiegravencia en luacutes de tecnologies per altra banda usuaris amb molt poca experiegravencia en el funcio-nament de noves tecnologies com tambeacute tot el rang entremig daquests dos extrems

Si meacutes no lusuari de lextrem de baixos nivells de coneixements teacute una experiegravencia miacutenima en luacutes de tecnologies eacutes a dir no partim dusuaris sense cap nivell de coneixements i experiegravencia pregravevia

Nivell de coneixements culinarisEl nivell de coneixement culinari dels nostres usuaris tambeacute comporta un rang molt ampli Des drsquousuaris amb molta experiegravencia a la cuina i grans aficionats fins a usuaris que comencin a fer els primers passos en aquest agravembit sigui per gust o necessitat

Recursos tegravecnicsAquesta aplicacioacute estagrave dissenyada per ser utilitzada principalment en smartphones i tablets tots dos aparells considerats com a objectes quotidians que podem trobar a totes les llars Podem afirmar que gairebeacute tot el puacuteblic objectiu descrit en aquest apartat probablement teacute un telegravefon intelmiddotligent

SegmentacioacuteSampP eacutes producte de difusioacute bastant general eacutes a dir el rang dusuaris al que va dirigit eacutes forccedila ampli i amb diferents nivells de coneixement de lentorn informagravetic Per tant per facilitar el treball de dis-seny per tal dadaptar i optimitzar laplicacioacute de manera correcta al puacuteblic objectiu sha dut a terme el Modelatge dUsuari1

1 ANNEX II MODELATGE DUSUARI

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

20

83 Anagravelisi de mercat

Per a realitzar lrsquoanagravelisi de mercat srsquoha valorat tres aplicacions que realitzen una funcioacute similar a la drsquoaquest projecte o si meacutes no parts involucrades

En aquesta anagravelisi ens centrem en com es duen a terme les gestions de Menuacute i de Receptari ja que la llista de la compra (tot i ser el primer punt de les millores de futur de la nostra aplicacioacute) estagrave ex-closa drsquoaquest projecte Tanmateix es tenen en compte certs aspectes del llistat perquegrave la realitzacioacute posterior drsquoaquesta ampliacioacute no requereixi modificacions de base

Aplicacioacute 1 Easy Menu PlannerAquesta aplicacioacute es centra en la planificacioacute de menuacutes i lrsquoautomatitzacioacute de la llista de la compra Eacutes una aplicacioacute molt senzilla

MenuacutePunts fortsbull Es poden escollir els formats dels agravepats dinar i sopar (1 o 3 plats) i afegir o treure els esmorzarsbull Es poden seleccionar els colors que es veuran en pantalla per cada tipus de platbull Es pot partir drsquouna base de menuacute buida i omplir-la seleccionant plats (de manera molt fagravecil i des del mateix menuacute) utilitzar alguna planificacioacute que hi hagi guardada o omplir-la automagraveticamentbull Es poden guardar les planificacions com a plantillabull Es poden modificar per plats les planificacions finalitzadesPunts feblesbull Cada dia ha de tenir el mateix format eacutes a dir si se selecciona 1 plat per dinar nomeacutes podrem anotar una recepta en aquest agravepat al llarg de tota la setmana

ReceptariPunts feblesbull No utilitza un receptari com a tal bagravesicament solmiddotlicita saber els ingredients que soacuten utilitzats

per a la realitzacioacute dels plats per tal de poder elaborar el llistat de compra (tot sense quantitats)bull Eacutes un apartat molt bagravesic que no utilitza cap tipus de base de dades tot el que srsquoescriu com a

ingredient drsquouna recepta ho traspassa directament al llistat de comprabull La cerca de plats tambeacute eacutes poc pragravectica ja que nomeacutes es poden localitzar pel nom de la recepta

Aixograve siacute mostra les receptes coincidents amb la paraula o lletres indicades en el cercador

Figura 3 Captura de pantalla Easy Menu

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

21

Navegacioacute global Clagravessica Basa la navegacioacute principal en un menuacute desplegable de text situat a la part superior es-querra de la pagraveginaNavegacioacute localIgual que la navegacioacute global perograve amb diferent icona i situada a la part superior dretaIdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-la PublicitatDisposa dun espai publicitari de Google en la part inferior de totes les pagravegines de laplicacioacuteSincronitzacioacutePermet la sincronitzacioacute automagravetica o manual entre dispositiusFeedbackTeacute una opcioacute per enviar suggeregravencies

Aplicacioacute 2 Recetario recetas de cocinaAquesta per altra banda eacutes una aplicacioacute centrada en les receptes ja que no treballa la planificacioacute de menuacutes

ReceptariPunts fortsbull Teacute dividit el receptari en colmiddotleccions i dins de cada colmiddotleccioacute per categoriesbull Permet compartir les receptes valorar-les i descarregar-lesbull Teacute lrsquoopcioacute drsquoafegir enllaccedilos web en cas que les receptes provin-guin drsquoalgun blog o similarCercaLa cerca de receptes es realitza per nom de recepta ingredients o colmiddotleccionsNavegacioacute globalClagravessica Basa la navegacioacute global en un menuacute desplegable de text situat a la part superior esquerra de la pagravegina Per tornar a la pagravegina principal srsquoha de recular per totes les pantalles recorre-gudes ja que srsquoanulmiddotla lrsquoopcioacute de menuacute per una icona de tornar enrere

Figura 4 Captura de pantalla Recetario

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

22

IdentitatManteacute una identitat gragravecies a la barra de menuacutes superior que eacutes constant en tot el llocPreuEacutes una aplicacioacute gratuiumlta amb publicitat perograve srsquoha de ser pregravemium per anulmiddotlar-laPublicitatTeacute un espai dedicat a la publicitat de Google i a meacutes cada cert temps apareixen bagraveners publicitaris ocupant tota la pantalla Molt molestSocialDisposa drsquouna xarxa social de xefs (seguidors i seguits)

Aplicacioacute 3 Planifood - Planificador inteligente de comidasAquesta aplicacioacute eacutes la que meacutes gestions abraccedila ja que a part de realitzar el menuacute i el llistat de la compra automagravetic tambeacute disposa drsquoun receptari propi de lrsquoaplicacioacute

MenuacutePunts fortsbull Genera el menuacute automagraveticamentbull Indica per cada agravepat el temps estimat de preparacioacute i les kcal de la ingestabull Es pot modificar el menuacute generat per platsbull Si es realitza alguna modificacioacute en principi lrsquoaplicacioacute ho teacute en compte pels menuacutes posteriorsPunts feblesbull No es pot escollir el nombre drsquoagravepats del menuacute directament en genera 5 (esmorzar mig matiacute dinar berenar i sopar)bull Les modificacions del menuacute soacuten confuses i embolicades Per a realitzar-les srsquoha drsquoaccedir primer a la recepta desitjada i des drsquoaquesta indicar que es vol afegir al menuacute En aquest punt lrsquoaplicacioacute et deriva al menuacute en mode modificar en el que srsquoha de localitzar i seleccionar el plat el qual es vol reemplaccedilar Si srsquohan de realitzar moltes modificacions eacutes un treball feixuc

bull Doacutena molta importagravencia a les imatges en la presentacioacute del menuacute principal aquest fet comporta poca claredat en la visualitzacioacute de la informacioacute Encapccedilalaments plans

bull Teacute lrsquoopcioacute (en girar la pantalla en format horitzontal) drsquouna millor visualitzacioacute de la planificacioacute del menuacute) perograve la resta de funcions treballen en format vertical i no es permet el format horitzontal per tant eacutes difiacutecil de localitzar

Figura 5 Captura de pantalla Planifood

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

23

ReceptariPunts fortsbull Teacute el receptari dividit en colmiddotleccions (de temporada novetats top de la setmana ragravepids )bull Fagravecil acceacutes a les meves receptes i favoritsbull El cercador de receptes eacutes fagravecil drsquoutilitzar i molt pragravectic Els filtres soacuten per receptes categories

aliments i colmiddotleccions i a mesura que es van seleccionant aquests filtres lrsquoaplicacioacute mostra els resultats obtinguts

bull La visualitzacioacute de les receptes eacutes molt fagravecil i cogravemode Manteacute la informacioacute ben ordenada i estruc-turada (temps kcal xef racions) i permet afegir a favorits compartir comentar

bull La seleccioacute drsquoingredients quantitats i unitats de mesura al crear una nova recepta eacutes molt encer-tada

Punts feblesbull Moltes colmiddotleccions i alguna una inespeciacuteficabull Doacutena meacutes importagravencia a aquestes colmiddotleccions que a les categories dels aliments (es pot localit-

zar un plat per categoria perograve nomeacutes des del menuacute de cerca)bull Difiacutecil acceacutes per a la creacioacute duna nova recepta Lopcioacute nomeacutes existeix dins lapartat de confi-

guracionsbull A lhora de crear una nova recepta a partir de la seleccioacute dingredients perd continuiumltat No sha

pogut crear una nova recepta personal despreacutes de 3 intents nomeacutes afegir els ingredients No es poden localitzar aquests 3 intents delaboracioacute tot i estar guardats pregraveviament (no parlem de receptes publicades sinoacute de processos guardats)

Navegacioacute globalEacutes forccedila pragravectica i intuiumltiva El menuacute superior eacutes estagravetic (gairebeacute en totes les pantalles) i format per icones aixograve siacute poc representatives Es pot canviar de pantalla mitjanccedilant aquest menuacute o des-placcedilar-se arrossegant la pantalla de dreta a esquerraEl mateix menuacute global fa la funcioacute de la navegacioacute suplementagraveria el qual ajuda a no perdrersquos per lrsquoaplicacioacuteNavegacioacute localDins dels apartats del menuacute global trobem diferenciats subapartats en dins la mateixa liacutenia que el menuacute principalIdentitatManteacute una identitat gragravefica en tot el site Srsquoidentifica clarament que eacutes una aplicacioacute de receptesPreuEacutes una aplicacioacute gratuiumlta perograve per accedir a algunes colmiddotleccions del receptari necessites estar ins-crit com a Pregravemium (099euromescolmiddotleccioacute)PublicitatNomeacutes disposa drsquoespai publicitari en les pagravegines de configuracioacute i llistat de la compra i permet solmiddotli-cituds de publicitat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

24

9 Disseny de la Base de DadesLa Base de Dades de lrsquoaplicacioacute eacutes una part molt important drsquoaquesta per tal de poder oferir un fun-cionament ragravepid i eficaccedil En aquest apartat es tracta el disseny de la BBDD pertanyent al receptari i a la gestioacute de menuacutes

91 Diagrama Entitat-Relacio (E-R)

Figura 6 Diagrama Entitat-Relacioacute

VALUE

WEEK

ID

WEEK

ID

NAME

TYPE

USERNAME

EMAIL

PASSWORD

NAME

TYPE

ID

NAME

QUANTITY

ID

NAME

ID

NAME

PORTIONS

INCLUDE

MENU

PRIVACITY

USER

DAY

MEAL

RECIPE

MEASURE

COLLECTION

USE

INGREDIENT

PREFER

LIKERECIPE

PRODUCE

PLAN

UTILIZE

BELONG TO

REUSE

BE

N1

NM

M

N

O

N

1

N

N

M

M

11

N N

M

N

O

M N ID

N

ORIGINAL

ID

LIKEMENUNM

ID

1

HAS1

IMAGES

IMG

THUMB

DONE PROCEDURE POINT

TEXT

LIKES

LIKES

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

25

92 Model Relacional

USER (id email username password)DAY (id name)MEAL (id type)COLLECTION (id name)PRIVACITY (type)MEASURE (id name)INGREDIENT (id name)MENU (id week author likes) author REFERENCES USER (id)

RECIPE (id name portions author collection privacity original likes) author REFERENCES USER (id) collection REFERENCES COLLECTION (id) privacity REFERENCES PRIVACITY (type) original REFERENCES RECIPE (id)

IMAGES (recipe img thumbnail) recipe REFERENCES RECIPE (id)

UTILIZE (user menu week) user REFERENCES USER (id) menu REFERENCES MENU (id)

INCLUDE (menu day meal recipe) menu REFERENCES MENU (id) day REFERENCES DAY (id) meal REFERENCES MEAL (id) recipe REFERENCES RECIPE (id)

PREFER (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKERECIPE (user recipe) user REFERENCES USER (id) recipe REFERENCES RECIPE (id)

LIKEMENU (user menu) user REFERENCES USER (id) menu REFERENCES MENU (id)

RECIPEPROCEDURE (recipe point textPoint) recipe REFERENCES RECIPE (id)

USES (recipe ingredient measure quantity) recipe REFERENCES RECIPE (id) ingredient REFERENCES INGREDIENT (id) measure REFERENCES U_MEASURE (id)

REUSE (recipe reused) recipe REFERENCES RECIPE (id) reused REFERENCES RECIPE (id)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

26

11 Arquitectura de la informacioacuteLrsquoarquitectura de lrsquoaplicacioacute es basa en tres pantalles principals mitjanccedilant les quals srsquoaccedeix a la resta de pantalles i a les diferents funcionalitats de lrsquoaplicacioacute

111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI

Pantalla RegistreAquesta pantalla nomeacutes apareix per dur a terme el registre de lrsquousuariHi solicita

bull un nom drsquousuari bull un correu electrogravenic associatbull una clau i la seva verificacioacutebull lrsquoacceptacioacute de la poliacutetica de privacitat

Teacute acceacutes abull la pantalla on es mostra la poliacutetica de privacitat

Pantalla LoginAquesta pantalla nomeacutes apareix cas drsquohaver-se tancat la sessioacuteHi solicita

bull el nom drsquousuaribull la clau

Permet lrsquoopcioacute de recuperacioacute de clau

Pantalla recuperacioacute de clauAquesta pantalla apareix en cas que lrsquousuari hagi oblidat la clau i en soliciti la recuperacioacute Hi solicita

bull el nom drsquousuari bull el correu electrogravenic associat

En aquet proces es gestiona una nova clau i srsquoenvia a lrsquousuari mitjanccedilant un email

Pantalla modificacioacute de clauAquesta pantalla apareix en cas que lrsquousuari vulgui modificar la clau (ja sigui per recuperacioacute de clau com per altres opcions o necessitats)Hi solicita

bull la clau actualbull la nova clau i la seva confirmacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

27

Pantalla configuracioacuteAquesta pantalla mostra les dades principals de lrsquousuari (nom i correu) i permet els ajustos princi-pals de lrsquoaplicacioacute

bull activacioacute desactivacioacute drsquoajudabull tancar la sessioacute

Teacute acceacutes abull la viusalitzacioacute de lrsquoaviacutes legalbull la pantalla de modificacioacute de contrassenya

112 Continguts de lrsquoaplicacioacute RECEPTARI

Pantalla principal ReceptariAquesta eacutes la pantalla principal de la funcionalitat de receptari de lrsquoaplicacioacute Hi ha indicat

bull les colmiddotleccions de receptesTeacute acceacutes a

bull la pantalla Cercar Recepta (al clicar sobre botoacute)bull la pantalla Editar Recepta (al clicar sobre botoacute)bull la pantalla Colmiddotleccioacute (al clicar sobre una colmiddotleccioacute concreta) bull la pantalla drsquoajustos (menuacute secundari)

En fases posteriors tindragrave acceacutes abull la pantalla Menuacute (navegacioacute global)bull la pantalla Calendari (navegacioacute global)

Pantalla Editar ReceptaDes drsquoaquesta pantalla podrem crear noves receptesConsta de tres pestanyes

INGREDIENTSPermet afegir

bull ingredientsbull quantitats bull unitats de mesurabull receptes (salses masses) que es puguin reutilitzar

Permet eliminar els ingredients afegits amb anterioritatPREPARACIOacutePermet

bull afegir punts a la preparacioacute de la receptabull eliminar punts afegits amb anterioritatbull editar els punts mitjanccedilant el teclat

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

28

DADESDes drsquoaquesta pestanya se soliciten les caracteriacutestiques principals de les receptes (nom nordm de comensals etiquetes privacitat i imatge) i es guarda la recepta (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla de la qual proveacute Receptari o Recepta (tornar enrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir recepta des drsquoingredients)bull la pantalla Recepta (un cop guardada es visualitza)

Pantalla Cercar ReceptaAquesta pantalla permet cercar receptes puacutebliques de la base de dadesFiltres

bull nom de lrsquoautorbull nuacutem de comensalsbull colmiddotleccioacute bull ingredient

Mostrabull total de resultats de cercabull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute(tornar enrere) Receptari Recepta Editar Recepta o en un futur

Editar Menuacute bull la pantalla Recepta (clicant sobre resultat)

Pantalla ReceptaDes drsquoaquesta pantalla es visualitza la recepta Hi ha indicat

bull nombull valoracioacutebull imatgebull ingredientsbull preparacioacutebull nom autor

Permetbull valorar la receptabull etiquetar la recepta

Teacute acceacutes abull la pantalla Editar Recepta (al clicar sobre botoacute editar)bull la pantalla de la qual proveacute (tornar enrere) Cercar Editar Recepta o en un futur Colmiddotleccioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

29

Pantalla ColmiddotleccioacuteDes drsquoaquesta pantalla es visualitza les receptes que formen part de cada colmiddotleccioacute de manera or-denada

bull les meves receptes preferits i altres receptesbull valoracioacutebull etiquetatge

Hi ha indicatbull imatge de cada resultatbull valoracioacute de cada resultatbull nom autor de cada resultatbull nom recepta de cada resultatbull etiqueta de cada resultat

Teacute acceacutes abull la pantalla de la qual proveacute Receptari (tornar enrere)bull la pantalla Recepta (clicant sobre una recepta en concret)

113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)

Pantalla principal CalendariDes drsquoaquesta pantalla es visualitza el calendari anual dividit en les setmanes que formen els menuacutes Hi ha indicat

bull lrsquoany actualbull el nuacutemero de setmanabull els dies de calendari que ocupa la setmana (del dilluns diames fins al diumenge diames)bull quin menuacute hi ha associat a cada setmana i lrsquoetiqueta corresponentbull si no hi ha cap menuacute associat

Teacute acceacutes abull la pantalla Editar i Cercar Menuacute (al clicar sobre una setmana concreta)bull la pantalla Menuacute (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla principal MenuacuteAquesta eacutes la pantalla inicial de lrsquoaplicacioacute on hi visualitzem el menuacute de la setmana actual a partir del dia actualHi ha indicat

bull el nuacutemero de setmana i lrsquoetiqueta del menuacute associat a aquestabull el dia de calendari que ens ocupa (dilluns diames)bull els agravepats en que es divideix el diabull els plats o receptes (que formen cada agravepat) i les etiquetes corresponents

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

30

Teacute acceacutes abull la pantalla Recepta (al clicar sobre una recepta concreta)bull la pantalla Calendari (navegacioacute global)bull la pantalla Receptari (navegacioacute global)bull Ajustos (menuacute secundari)

Pantalla Editar i Cercar MenuacuteDes drsquoaquesta pantalla podrem cercar menuacutes puacuteblics realitzats per altres usuaris i utilitzar o modifi-car-los o crear-ne un de nouConsta de dos pestanyes

CERCADORPermet cercar menuacutes publicats per altres usuarisFiltres

bull nom de lrsquoautorbull nuacutemero de setmana en que ha estat creat i guardat el menuacute

Mostrabull total de resultats de cercabull nuacutemero de setmana de cada resultatbull valoracioacute de cada resultatbull nom de lrsquoautorde cada resultat

EDITOREn la pestanya editar visualitzem el menuacute de la mateixa manera que en la pantalla Menuacute perograve amb eines de modificacioacute

bull eliminar plats (receptes)bull afegir plats (receptes)bull guardar menuacute (lrsquointrodueix a la BBDD)

Teacute acceacutes abull la pantalla Calendari (tornar endarrere)bull la pantalla Cercar Recepta (al clicar sobre el botoacute afegir)

114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)

Pantalla Automatitzacioacute CompraEn aquesta pantalla apareixeragrave automagraveticament el llistat de la compra en funcioacute del menuacute setmanal Permetragravebull eliminar els aliments inclosos automagraveticamentbull afegir elements siguin alimentaris o noEs podragrave escollir lrsquoabast del llistat de la compra eacutes a dir quins dies es cobriran (setmanal diari cada tres dies) i si aquesta es duragrave (o no) a terme per una empresa especialitzada drsquoenviament a domicili

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

31

115 Abre de continguts

Figura 7 Arbre de continguts

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

LOGIN

MENUacuteCALENDARI RECEPTARI

RECEPTA

EDITAR MENUacute

CERCAR RECEPTA EDITAR RECEPTACOLmiddotLECCIOacute

INGREDIENTS

PREPARACIOacute

DADES

EDITAR MENUacute

CERCAR MENUacute

BBDD

Dades usuari

Activardesactivar ajuda

Tancar sessioacute

Aviacutes legal

LLISTAT COMPRA

REGISTRE

MODIFICACIOacute PASS

RECUPERACIOacute PASS

CONFIGURACIOacute

AVIacuteS LEGAL

CAgraveMERA

X X

X

X

Sortir de lrsquoaplicacioacute

Veure pagravegina drsquoajuda

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

116 Prototips Lo-Fi Wireframes

Aquests soacuten els wireframes inicials de les pantalles principals de lrsquoaplicacioacute realitzats sobre paper

Calendari - Menuacute - Receptari - Ajustos

Editar i Cercar Menuacute

Editar Recepta

32

Figura 8 Prototip Baixa Fidelitat (Calendari-Menuacute-Receptari-Ajustos)

Figura 9 Prototip Baixa Fidelitat (Editar i cercar Menuacute)

Figura 10 Prototip Baixa Fidelitat (Editar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

Cercar Recepta

Recepta

Colmiddotleccioacute

33

Figura 11 Prototip Baixa Fidelitat (Cercar Recepta)

Figura 12 Prototip Baixa Fidelitat (Recepta)

Figura 13 Prototip Baixa Fidelitat (Colmiddotleccioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

34

117 Prototips Hi-Fi Mockups

Aquests soacuten els mockups definitius de les pantalles principals de lrsquoaplicacioacute realitzats amb Anima-teCC

Calendari - Menuacute Setmanal- Receptari

Editar i Cercar Menuacute

Figura 14 Prototip Alta Fidelitat (Calendari-Menuacute-Receptari)

Figura 15 Prototip Alta Fidelitat (Editar i Cercar Menuacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

35

Editar Recepta

Cercar Recepta i Visualitzar Recepta

Figura 16 Prototip Alta Fidelitat (Editar Recepta)

Figura 17 Prototip Alta Fidelitat (Buscar Recepta i Visualitzar Recepta)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

36

Colmiddotleccioacute i les Meves Receptes

Visualitzacioacute de menuacutes

Figura 18 Prototip Alta Fidelitat (Colmiddotleccioacute i les Meves Receptes)

Figura 19 Prototip Alta Fidelitat (Visualitzacioacute de menuacutes)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

37

Registre i inici de sessioacute

Figura 20 Prototip Alta Fidelitat (Registre i inici de sessioacute)

Recuperacioacute de contrassenya i configuracioacute

Figura 21 Prototip Alta Fidelitat (Recuperar pass i configuracioacute)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

38

12 Avaluacioacute de la usabilitat

121 Modificacions inicials

A partir drsquoun primer anagravelisis dels Wireframes inicials realitzats sobre paper srsquohan realitzat una segraverie de modificacions Aquestes en soacuten les principals i meacutes importants

bull Srsquoha eliminat ldquoCONFIGURACIOacuterdquo del menuacute global de lrsquoaplicacioacute i srsquoha inclograves en la part supe-rior dreta de les tres pantalles principals com a menuacute secundari Drsquoaquesta manera deixem espai lliure en la navegacioacute principal per incloure en un futur el llistat de la compra

bull En ajustos srsquohi ha inclograves les opcions de tancar sessioacute i desactivar ajudabull Srsquoha corregit les etiquetes drsquoaquestes tres pantalles per a que corresponguin amb la nave-

gacioacute globalbull De la pantalla MENUacute srsquoha eliminat la possiblitat drsquoedicioacute ja que aquesta es realitza des de la

pantalla CALENDARI bull En la pantalla EDITAR RECEPTA en la pestanya de DADES tambeacute es solicita el tipus de

plat que srsquoha creat (a quina colmiddotleccioacute pertany) mitjanccedilant un menuacute desplegablebull En la pantalla CERCAR RECEPTA srsquohi ha afegit el filtre Nordm de comensals

122 Evaluacioacute heuriacutestica

Aquesta evaluacioacute ha sigut constant durant la realitzacioacute dels prototips drsquoalta definicioacute ja que durant el proceacutes srsquohan anat corregint els errors detectats Aquesta avaluacioacute heuriacutestica eacutes sobre els proto-tips de projecte definitius i es realitza mitjanccedilant una puntuacioacute sobre 3 on 3 implica que lrsquoaplicacioacute assoleix per complet lrsquoaspecte valorat 2 que lrsquoassoleix satisfactograveriament i 1 que no ho assoleix

Visibilitat de lrsquoestat del sistema 3 Lrsquoaplicacioacute no executa funcions automagravetiques o aleatograveries el control eacutes de lrsquousuari 3 Lrsquoaplicacioacute doacutena informacioacute visual en tot moment per a una millor orientacioacute i comprensioacute 3 Lrsquoaplicacioacute proporciona la resposta en un temps raonable

Consistegravencia 2 Lrsquoaplicacioacute eacutes constant i predictible3 Lrsquoaplicacioacute realitza lrsquoexecucioacute de tasques similars amb accions iguals3 Lrsquoaplicacioacute manteacute conceptes3 Lrsquoaplicacioacute conteacute elements gragravefics constants3 Lrsquoaplicacioacute presenta la informacioacute en un ordre llogravegic3 Lrsquoaplicacioacute manteacute un llenguatge coherent i familiar per a lrsquousuari

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

39

Control de lrsquousuari 3 Lrsquoaplicacioacute disposa de tota la informacioacute necessaria per lrsquousuari3 Lrsquoaplicacioacute disposa de les eines per a la execusioacute de les accions previstes2 Lrsquoaplicacioacute permet abandonar totes les situacions

Previsioacute drsquoerrors3 Lrsquoaplicacioacute facilita la seleccioacute drsquoitems mitjanccedilant llistes desplegables3 Lrsquoaplicacioacute no accepta caragravecters alfabegravetcs en camps numegraverics1 Lrsquoaplicacioacute indica per defecte els valors meacutes probables en els camps drsquointroduccioacute de text2 Lrsquoaplicacioacute no permet el canvi de pantalla sense preguntar si es desitja desar els canvis

Estructura visible1 Lrsquoaplicacioacute disposa drsquoun mapa de lloc3 Lrsquoaplicacioacute conteacute una estructura constant de continguts

Interfiacutecie explorable3 Lrsquoaplicacioacute ofereix llibertat en la navegacioacute3 Lrsquoaplicacioacute no permet camins sense sortida2 Lrsquoaplicacioacute permet la reversibilitat de les accions de lrsquousuari2 Lrsquoaplicacioacute conteacute una ruta ragravepida per accedir als continguts3 Lrsquoaplicacioacute manteacute una consistegravencia visual

Llei de Fitts2 Lrsquoaplicacioacute mostra les opcions meacutes importants meacutes visibles que les secundagraveries2 Lrsquoaplicacioacute centra activitats localitzades en les quatre costats de la finestra

Metagravefores3 Lrsquoaplicacioacute conteacute elements metafograverics consistents i drsquointerpretacioacute fagravecil

Uacutes de colors3 Lrsquoaplicacioacute acompanya lrsquouacutes de colors amb altres recursos

Missatges drsquoerror3 Lrsquoaplicacioacute indica els missatges drsquoerror en termes senzills i explicatius3 Lrsquoaplicacioacute evita la paraula lsquoerrorrsquo i els signes drsquoexclamacioacute en els missatges drsquoerror

Temps de resposta2 Lrsquoaplicacioacute proporciona una resposta inmediata i clara2 Lrsquoaplicacioacute manteacute senyals visuals o auditius informant que les accions han sigut detectades2 Lrsquoaplicacioacute permet la cancelacioacute de qualsevol proceacutes3 Lrsquoaplicacioacute informa drsquoaccions meacutes tardanes mitjanccedilant indicadors gragravefics drsquoespera

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

40

123 Avaluacioacute final

Un cop finalitzat el desenvolupament inicial de lrsquoaplicacioacute srsquoha procedit a una nova avaluacioacute sobre lrsquoaplicacioacute instalmiddotlada en el dispositiu mogravebil

Aquesta uacuteltima avaluacioacute ha detectat diferents problemes funcionals principalment

1 Falta de possibilitat de sortida de lrsquoaplicacioacute per a sortir de lrsquoaplicacioacute srsquohan de tancar els processos mitjanccedilant el telegravefon mogravebil

2 Si lrsquousuari accedeix a ldquoafegir imatgerdquo no teacute la possibilitat de cancelar lrsquoaccioacute

3 Lrsquoaplicacioacute no recupera i guarda els paths de les imatges emmagatzemats a la BBDD a lrsquohora de la reedicioacute drsquouna recepta i per tant en guardar els nous resultats aquests srsquoeliminen de la BBDD i per tant la recepta perd lrsquoenllaccedil amb la imatge

4 Falta de solmiddotlicitud de permisos de cagravemera lrsquoaplicacioacute no demana permisos per a la utilitzacioacute de la cagravemera i per tant per a poder fer-ne uacutes aquests srsquohan drsquoindicar manualment des de la configuracioacute del telegravefon En cas de no atorgar-los lrsquoaplicacioacute no avisa de la no disponibilitat i el botoacute drsquoafegir imatge doacutena la sensacioacute de no fer cap accioacute

5 En cas drsquoatorgar una estrella o afegir la recepta a preferides (des de la pantalla visualitzacioacute de la recepta) aquestes modificacions no es faran visibles en anar (back) a la pantalla de cerca o de colmiddotleccioacute sinoacute que srsquoha drsquoaccedir a la pagravegina inicial de receptari i tornar a entrar a la colmiddotleccioacute Eacutes a dir no es refresquen els resultats en lrsquoaplicacioacute instantagraveniament

6 Lrsquoaplicacioacute no srsquoinstalmiddotla en versions Android anteriors

Donada la importagravencia del primer problema (la falta de possibilitat de sortir de lrsquoaplicacioacute) aquest ja ha sigut solucionat Tambeacute han quedat solucionats el segon punt mitjanccedilant un botoacute ldquocancelarrdquo dins lrsquoaccioacute drsquoafegir imatge i el tercer punt on lrsquoaplicacioacute recupera els enllaccedilos guardats si lrsquousuari no afegeix una imatge nova

La resta queden pendents i indicades a la projeccioacute a futur juntament amb altres millores potser no tan importants per al correcte funcionament de lrsquoaplicacioacute

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

41

13 Projeccioacute a futurAquest projecte eacutes la base drsquouna aplicacioacute meacutes extensa en la qual srsquoamplien objectius i funcionali-tats Drsquoaquesta manera estructurarem les projeccions de futur en tres grans blocs Primerament les correccions de funcionalitats bagravesiques per a la finalitzacioacute de la versioacute beta per altra banda les millores i ampliacions de la part de lrsquoaplicacioacute realitzada en aquest projecte (sobre la gestioacute drsquousuaris la base de dades i el receptari) i finalment les projeccions de futur previstes en relacioacute a les funcionalitats fora de projecte

131 Correccioacute funcionalitats bagravesiques

CAgraveMERAbull Solmiddotlicitud permisosbull Visualitzacioacute imatge meacutes gran durant la realitzacioacute de la fotografia (mantenint mides estipu-

lades per a lrsquoemmagatzematge)

RESULTATS bull Refrescar (al moment) la visualitzacioacute dels resultats en modificar les dades de les receptes

com per exemple a lrsquohora drsquoatorgar o treure una estrella o afegir una recepta a la colmiddotleccioacute preferides Eacutes a dir que lrsquousuari no hagi de sortir i tornar a entrar a la colmiddotleccioacute per tal de poder veurersquon la modificacioacute

AVIacuteS LEGAL bull Lrsquoaviacutes legal i poliacutetica de privacitat al que podem accedir en aquests moments eacutes un text simu-

lat Srsquoha drsquoestudiar i editar el text real

VERSIONS ANDROIDbull Srsquoha de comprobar el funcionament de lrsquoaplicacioacute en diferents versions drsquoAndroid i fer un es-

tudi de mercat de les versions actuals per a confirmar fins a quina versioacute srsquohauria drsquoincloure per tal de que lrsquoaplicacioacute pugui arribar al miacutenim drsquousuaris requerit

132 Millores de lrsquoaplicacioacute

BASE DE DADESbull Millorar la seguretat drsquoacceacutes (codi PHP) per evitar possibles atacs injeccioacute SQL i XSS com

per exemple la verificacioacute de les dades rebudesbull Afegir la taula GROUP a la BBDD Equivalent als grups drsquoaliments Carn peix verdura frui-

ta cereal lagravecti llegum fruit sec licors espegravecies olis vinagres

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

42

RECEPTARIbull COLmiddotLECCIONS Separar els resultats per grups bull NOVA RECEPTA (PREPARACIOacute) Avisar drsquoingredients indicats que no han sigut utilitzats en

la preaparacioacute bull NOVA RECEPTA (DADES) Exportacioacute del codi referent a la cagravemera a una classebull CERCA Afegir camp ldquogrup drsquoalimentsrdquo per facilitar-ne la cerca i per tant restringir el camp

ldquoingredientsrdquo a aquesta eleccioacutebull Valoracioacute de lrsquoetiquetatge de la recepta (Atorgar etiqueta groga verda o vermella) Lrsquoetiqueta

representativa de la recepta seragrave la mitja drsquoaquestes interpretacions

GESTIOacute DrsquoUSUARIbull Neteja de codi (redireccioacute POO)bull Senyalitzacioacute de camps erronis en validacionsbull Afegir opcioacute de contactebull Permetre la modificacioacute del nom drsquousuari i el correu electrogravenic

CODIbull Posicionament i redimensionament drsquoalguns elementsbull Definir correctament les funcions on swipe (ingredients preparacioacute colmiddotleccions i cerques)bull Polir funcionament de classes i codibull Utilitzacioacute de llibreries (especialment per als inputs i llistes desplegables)

AJUDAbull Millorar la visualitzacioacute de lrsquoajuda (text amb format [html i css] i imatges o demostracions

individuals)

SERVIDORbull Eliminar aquelles imatges que no soacuten utilitzades per cap recepta Eacutes a dir si una recepta teacute

una imatge i el propietari decideix modificar-la eliminar lrsquoanterior en desuacutes

133 Ampliacioacute de lrsquoaplicacioacute

Realitzacioacute BLOC GESTIOacute DE MENUacuteSTenint en compte certes millores sobre la programacioacute inicial

- Visualitzar al calendari si hi ha alguacuten menuacute setmanal incomplet (signe exclamacioacute en ver-mell)- A lrsquoeliminar alguna recepta que estigui essent utilitzada en alguacuten menuacute que lrsquoespai que ocupa quedi en blanc i no eliminat- Recomanacions automagravetiques de plats i menuacutes saludables en cas drsquoescollir o crear dietes hipercalograveriques

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

43

- Poder realitzar gestions sobre plats congelats eacutes a dir poder indicar la realitzacioacute doble drsquouna recepta una setmana i incloure-la en el menuacute drsquouna setmana posterior

Realitzacioacute AUTOMATITZACIOacute LLISTAT DE COMPRATenint en compte certes caracteriacutestiques

- Possibilitat drsquoescollir el dia de compra a partir del qual es generaragrave el llistat i indicar per a quin dia es necessita cada producte per tal de poder realitzar la compra drsquoaliments frescs el meacutes ajustat possible- Possibilitat drsquoescollir si la compra es duragrave a terme per una empresa especialitzada en en-tregues a domicili

bull Ampliar IDIOMES principalment catalagrave i anglegravesbull INTERACCIOacute AMB USUARIS Amb aquesta millora srsquoinclouria una nova privacitat AMIS-

TATS i es podria compartir informacioacute amb els usuaris afins

INTERACTUACIOacute ENTRE USUARISLa intencioacute eacutes gestionar lrsquoaplicacioacute com una xarxa social de menus i receptes on els usuaris puguin utilitzar valorar comentar i compartir les receptes i els menuacutes Srsquoafegiria una nova privacitat ldquoles meves amistatsrdquo

EXPORTACIOacute DE LrsquoAPLICACIOacute PER A iOSModificar el codi per a poder adaptar el correcte funcionament de lrsquoaplicacioacute per a dispositius Apple

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

44

14 Conclusions

Tot i que aquest ha sigut un grau ple de pragravectiques i constant desenvolupament drsquoactivitats he de dir que realment la millor manera drsquoaprendre eacutes aquesta la realitzacioacute drsquoun projecte real i complet Moltes errades es cometen per desconeixement i falta de pragravectica

A partir dels primers errors en la definicioacute de lrsquoabast del projecte i la planificacioacute drsquoaquest mrsquohan fet entendre la gran importagravencia que tenen en tot el desenvolupament posterior Queda clar que en fu-turs projectes intentareacute ser meacutes realista tot i que a falta drsquoexperiegravencia sempre seragrave difiacutecil

Tambeacute eacutes important conegraveixer els liacutemits drsquoun mateix o lrsquoajuda externa que un pot tenir Si beacute eacutes veritat que es poden trobar solucions per a tot sempre hi ha una millor solucioacute Eacutes a dir que una solucioacute sigui funcional no implica que estigui ben definida o sigui la correcta

Sempre he tingut clar que srsquoha de tenir una idea clara de totes les funcionalitats i processos que volem atorgar a la nostra aplicacioacute per tal de crear un codi ordenat des drsquoun inici perograve he pogut comprovar que no eacutes una feina fagravecil ja que sempre sorgeixen millores o problemes que fan variar el contingut o idees inicials i drsquoaquiacute la gran importagravencia de lrsquoavaluacioacute constant

Aquest fet em retorna a la importagravencia de la definicioacute de lrsquoabast i del projecte inicials ja que sempre sorgeixen possibles millores i drsquoaquesta manera finalitzar un projecte seria impossible

Gragravecies a aquest projecte mrsquohe ratificat en lrsquoeleccioacute drsquoaquest Grau Multimegravedia Tot i patir alts i baixos al llarg de tot el semestre mrsquohe sentit completament motivada pel projecte i ara arribant al final drsquoaquest espero continuar treballant amb aquesta aplicacioacute i portar-la a terme completament

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

45

Annex I Lliurables del projecte

bull Carpeta DOCUMENTACIOacuteJuntament amb aquesta memograveria conteacute lrsquoinforme drsquoautoavaluacioacute

bull Carpeta PROJECTEConteacute totes els arxius referents a la BBDD el Codi Font les imatges lrsquoarxiu executable

bull Carpeta PRESENTACIONSConteacute les presentacions del projecte (visual-escrita i viacutedeo)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

46

Annex II Codi font

Interaccioacute entre pagravegines (tornar enrere) tenint en compte caracteriacutestiques especials depenent de la pagravegina

Creacioacute drsquoobjecte i instanciacioacute drsquoaquests

Validacioacute de formularis i solicitacioacute de dades a la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

47

Recuperacioacute i validacioacute de dades de la BBDD i registre drsquoaquestes en un SharedObject

Enviar i recuperar dades de la BBDD

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

48

Consultes mitjanccedilant PHP

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

49

Annex III Modelatge drsquousuari

Persona focal 1

Nom Miquel Bosch

Edat 25 anys

Professioacute Enginyer tegravecnic

PERSONA

Perfil geogragravefic En Miquel viu en parella en un poble de 8000 habitants de la pro-viacutencia de Barcelona i treballa en una localitat a uns 20 km de casa seva

Perfil demogragravefic Eacutes un noi de 25 anys que acaba de comenccedilar a treballar despreacutes de finalitzar un Grau drsquoenginyeria En Miquel forma part dels denominats mileuristes

Perfil psicosocial En Miquel forma part drsquouna famiacutelia de classe mitjana aficionat a la tecnologia a la cuina i jugador de bagravesquet

Relacioacute persona-producte Eacutes un usuari que utilitza lrsquoaplicacioacute frequumlentment perograve no nrsquoutilitza tots els avantatges utilitza lrsquoeina principalment com a receptari i la ges-tioacute de menuacutes setmanals queda delegada a un segon pla Representa un 20 dels usuaris focals

ESCENARI

Context En Miquel eacutes un usuari habitual drsquointernet tant per a necessitats laborals com per altres afers personals No ha utilitzat mai un llibre de receptes i tot el que ha evolucionat en aquesta quumlestioacute ha sigut mitjanccedilant la xarxa Ara srsquoha decidit a tenir un receptari propi per tal de tenir-ho tot ben organitzat Aprofita els caps de setmana per aprofundir en les seves aficions entre elles la cuina

Interaccioacute Prefereix una aplicacioacute fagravecil que li permeti gestionar les seves receptes i buscar-ne de noves sense complicacions Tot i que li fa mandra haver drsquoescriure les receptes que ha localitzat drsquointernet per a poder tenir-les guardades i gestionar-les en lrsquoaplicacioacute

Caracteriacutestiques emocionals Eacutes un noi pacient i tranquil perograve una miqueta gandul Espera treballar amb aplicacions intuiumltives que li facilitin les gestions quotidianes per a tenir meacutes i millor temps drsquooci

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

50

Persona focal 2

Nom Marta Oliver

Edat 33 anys

Professioacute Recepcionista

PERSONA

Perfil geogragravefic La Marta viu a Barcelona al barri de Gragravecia i treballa de recepcio-nista en un dels hotels meacutes importants de la ciutat Els desplaccedilaments per anar a la feina els fa en metro La famiacutelia teacute una segona residegravencia a Cadaqueacutes en la que hi fan vida els caps de setmana i festius

Perfil demogragravefic Eacutes una mare de famiacutelia de 33 anys i acaba de tenir el seu segon fill Va cursar els estudis a la Universitat de Bellaterra i teacute un bon sou com a respon-sable de la recepcioacute de lrsquohotel

Perfil psicosocial La famiacutelia de la Marta eacutes de classe social mitja-alta ja que el seu marit tambeacute treballa com a gerent drsquouna empresa alimentagraveria En aquests moments la Marta compagina una jornada reduiumlda a la feina amb les obligacions de la casa i els nens No teacute temps per res meacutes

Relacioacute persona-producte La Marta utilitza lrsquoaplicacioacute regularment ja que lrsquoajuda amb la gestioacute dels menuacutes Ja fa meacutes drsquoun any que la utilitza i gairebeacute li fa tota la feina de planificacioacute Nomeacutes a vegades realitza petites modificacions puntuals als menuacutes ja guardats Troba a faltar que lrsquoaplicacioacute realitzi altres funcions com per exemple la llista de la compra automagravetica Representa un 60 dels usuaris focals

ESCENARI

Context La Marta treballa amb internet i tambeacute en fa uacutes de caragravecter personal espe-cialment en compres drsquoalimentacioacute i altres productes per tal drsquoestalviar temps No teacute un horari de connexioacute establert i es connecta a qualsevol hora del dia normalment aprofita quan la resta de la feina estagrave feta i els nens soacuten a dormir

Interaccioacute Estagrave interessada en una aplicacioacute que li faciliti i gestioni el magravexim possi-ble la feina Ha localitzat una altra app que tambeacute li realitza la llista de la compra perograve no vol perdre tota la informacioacute que ja teacute emmagatzemada en aquesta

Caracteriacutestiques emocionals Eacutes una persona molt detallista i una mica primmi-rada i per tant li agrada poder modificar certes receptes per adaptar-les a la seva manera de fer i gustos

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

51

Persona focal 3

Nom Anna Ramoneda

Edat 57 anys

Professioacute Jubilada

PERSONA

Perfil geogragravefic LrsquoAnna eacutes de Sabadell Eacutes una senyora prejubilada per problemes fiacutesics que ha sigut cuinera de professioacute durant meacutes de 25 anys i aficionada a la cuina de tota la vida

Perfil demogragravefic Viu a Sabadell amb el seu home i la sogra on tots tres cobren una pensioacute

Perfil psicosocial Soacuten una famiacutelia de classe social mitja i treballen un hort als afores de la ciutat Els diumenges srsquoajunta tota la famiacutelia per dinar 7 adults i 3 nens

Relacioacute persona-producte LrsquoAnna utilitza lrsquoaplicacioacute regularment perograve en especial el receptari Tot i realitzar la programacioacute de menuacutes setmanal a uacuteltima hora varia els agravepats programats en funcioacute del que hagi comprat al mercat Representa un 20 dels usuaris focals

ESCENARI

Context Tot i que no tenir gaire experiegravencia en lrsquouacutes de noves tecnologies lrsquoAnna ha apregraves el funcionament bagravesic de lrsquoaplicacioacute De moment li pren meacutes temps utilitzar lrsquoaplicacioacute que fer-ho com ho ha fet tota la vida perograve teacute temps i interegraves i ho vol tenir tot ben organitzat Creu que eacutes una bona manera per guardar i difondre les receptes de tants anys

Interaccioacute Li interessa una aplicacioacute molt intuiumltiva i accessible

Caracteriacutestiques emocionals Es posa molt nerviosa si realitza una accioacute no desi-tjada (com per exemple canviar de pagravegina involuntagraveriament o esborrar algun ingre-dient) i de seguida es perd (Ai No seacute quegrave he fet) Moltes vegades opta per sortir i tornar a entrar

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

52

Annex IV Llibre drsquoestil

1 TipografiaLa uacutenica tipografia utilitzada en tot el site eacutes la Verdana la qual variaragrave en mida i color dins els paragrave-metres establerts

CATEGORIA Vos-Atypl

Moderna Lineal

ORIacuteGEN I CONTEXT

Dissenyada per Mattew Carter i publicada per Microsoft el 1996

CARACTERIacuteSTIQUES

Sans serif de pal sec a partir de formes geomegravetriques bagravesiques drsquoeix vertical

MOSTRA

AbefgorVERDANA

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuwxyz1234567890

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

53

Tiacutetols de PantallaMajuacutesculaMida de la font 20 pxColor Pantone P 1-1 C

MenuacuteMajuacutesculaMida de la font 20 pxColor Dependragrave del fons (Pantone P 1-1 C o Pantone 533 C)

Tiacutetols principalsMinuacutesculaMida de la font 24 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

Tiacutetols secundarisMajuacutescula negretaCentrat o justificat a lrsquoesquerraMida de la font 17 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TextMinuacutesculaMida de la font 17 o 14 pxColor Dependragrave del fons (Pantone P 1-1 C Pantone 2113 U o Pantone 533 C)

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

54

2 Gamma cromagravetica

Aquests soacuten els colors principals que formaran part de lrsquoaplicacioacute Es permet lrsquouacutes de degradats

Pantone 533 C

R - 31G - 42B - 68

C - 95M - 72Y - 15K - 67

Pantone P 1-1 C

R - 255G - 255B - 255

C - 0M - 0Y - 0K - 0

Pantone 2113 U

R - 167G - 178B - 232

C - 41M - 24Y - 0K - 0

Pantone 2427 C

R - 3G - 95B - 29

C - 87M - 0Y - 100K - 50

Pantone P 49-16 C

R - 156G - 35B - 31

C - 0M - 99Y - 91K - 33

Pantone 102 XGC

R - 246G - 229B - 0

C - 0M - 0Y - 100K - 0

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

55

3 Elements drsquointeraccioacute

Sistema de navegacioacute principal

NORMAL Menuacute 20 px Pantone 2113 UHOVER ACTIU Menuacute 20 px Pantone P 1-1 C

Botons

NORMAL Fons Pantone 533 C Text Pantone P 1-1 C icones Pantone 2113 U

HOVER ACTIU Fons Pantone 2113 U Text Pantone P 1-1 C icones Pantone 533 C

4 Elements de formulari

Llistes de seleccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

56

Agraverees drsquointeraccioacute

NORMAL Fons Pantone P 1-1 C Text Pantone 533 C

HOVER ACTIU Fons Pantone 2113 U Text Pantone 533 C

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

57

Annex V Guia drsquousuari

1 Registre i inici de sessioacute

En cas de ser la primera vegada que srsquoutilitza lrsquoaplicacioacute trsquohauragraves de registrar Per realitzar co-rrectament lrsquooperacioacute has drsquoomplir tots els camps que es demanen el nom un correu electrogravenic una contrasenya (la qual hauragrave de ser confirmada per seguretat) i haver acceptat els nostres termes drsquousPodragraves llegir aquests termes clicant sobre lrsquoenllaccedil

Un cop siguis un usuari registrat en cas drsquohaver tancat voluntagraveriament la sessioacute nomeacutes necessi-taragraves tornar a iniciar-la indicant el teu nom drsquousuari i la contrasenya

En cas de que hagis oblidat la contrasenya mitjanccedilant la qual et vas registrar indicat-nos el teu nom drsquousuari i correu electrogravenic trsquoenviarem una nova clau Aixograve si per seguretat sersquot demanaragrave que la canvis el meacutes aviat possible Ho podragraves realitzar des de la pantalla de configuracions en lrsquoapartat de modificacioacute de contrasenya

1 23

1

2

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

58

2 Cerca de receptes

Des de la pantalla principal del receptari podragraves localitzar les receptes per colmiddotleccions (Entrants primers postres) o realitzar una cerca meacutes avanccedilada mitjanccedilant el cercador

A les colmiddotleccions els resultats venen ordenats en funcioacute del nombre drsquoestrelles que conteacute cada recepta Aquestes reciptes soacuten otorgades pels nostres usuaris (apartat 3 Visualitzacioacute de receptes)

A la cerca avanccedilada podragraves realitzar cerques meacutes concretes definint diferents paragravemetres de cerca nom de lrsquoautor colmiddotleccioacute ingredient o nombre de racions En aquest cas tambeacute vindragraven or-denades pel nombre drsquoestreslles

1

2

3

1 3

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

59

3 Visualitzacioacute de receptes

Des de la pantalla de visualitzacioacute hi trobaragraves

La imatge de la recepta (sempre que existeixi)El nombre de racionsEls ingredients utilitzats (quantitats i mesures)Les receptes reutilitzades (podragraves accedir a la visualitzacioacute de les mateixes)Lrsquoelaboracioacute

Hi podraacutes indicar si trsquoagrada la recepta (donant-li una estrella)Afegir-la a ldquoFavoritesrdquo per tal de tenir-la guardada per futures ocasions

Per uacuteltim podragraves utilitzar la recepta com a plantilla o base per una nova recepta progravepia Aixograve si has de pensar que en aquest cas en la teva recepta apareixeragrave un enllaccedil a la recepta original

1

12345

2

3

45

67

67

8

8

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

60

4 Edicioacute de receptes

Des de la pantalla pricipal del receptari hi trobaragraves lrsquoopcioacute EDITAR a partir de la que accediragraves al conjunt drsquoedicioacute format per 3 pestanyes ingredients elaboracioacute i dades

INGREDIENTS Hauragraves drsquoescriure lrsquoingredient a afegir perograve lrsquoaplicacioacute trsquoajudaragrave a partir dels in-gredients que conteacute la nostra base de dades En cas de ser un ingredient mai utilitzat li afegiragrave per a poder ser utilitzat en un futurQuan premis ldquoafegir ingredientrdquo aquest apareixeragrave en un llistat a la part inferiorTambeacute podragraves afegir una recepta ja creada que complementi la que estagraves elaborant mitjanccedilant el buscador (apartat 2 Cerca de receptes)Tant els ingredients com les receptes poden ser eliminats facilment en cas necessari

1

1

2

2

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

61

ELABORACIOacute Des drsquoaquesta pestanya podragraves editar lrsquoelaboracioacute de la recepta punt per punt Un cop escrita la instruccioacute prem ldquoafegir instruccioacuterdquo i aquesta quedaragrave enregistrada en el llistat inferior Podragraves eliminar o reeditar cada punt si ho creus necessari

En cas pregravemer reeditar lrsquoinstruccioacute seleccionada srsquoescriuragrave en pantalla per tal de ser modificada i podragraves escollir entre guardar els canvis o cancelar-los i deixar lrsquoinstruccioacute sense modificar

3

3

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

62

DADES En aquesta pestanya hauragraves drsquoindicar les dades de la recepta el nom de la receptala colmiddotleccioacute a la que pertany (has drsquoescollir una opcioacute donada)el nombre de racionsel valor energegravetic (baix mig alt) que fa referegravencia al nombre de caloriesprivacitat de la recepta (puacuteblica o privada)

En cas de ser puacuteblica seragrave visible per a tots els usuaris i podran realitzar receptes derivades de la mateixa en cas drsquoescollir la opcioacute privada nomeacutes tu podras veure i utilitzar la recepta

Si ho dessitges podragraves incloure una imatge de la recepta prement el botoacute ldquoafegir imatgerdquo Si la imatge capturada eacutes la dessitjada podragraves guardar-la per formar part de la recepta En cas contrari prem ldquorepetirrdquo per realitzar una nova foto

Finalment prem ldquoguardar receptardquo i aquesta quedaragrave em-magatzemada Ara ja podragraves trobar-la dins la colmiddotleccioacute a la qual pertany o dins les meves receptes

Des de la pantalla les meves receptes (a la que accediragraves des de la pantalla principal del receptari hi podragraves eliminar les re-ceptes si ho dessitges o modificar-les Sempre que vulguis modificar una recepta hauragraves drsquoaccedir-hi per aquiacute si ho fas des de la pagravegina de visualitzacioacute de la re-cepta el que estaragraves fent eacutes elaborar una nova recepta a partir de lrsquooriginal

4abcde

f

4abcdef

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

63

Annex VI Bibliografia

bull Fuenmayor Loacutepez Daniel Gonzaacutelez Sancho Marcos (2012) Aplicacions Rich Media Barcelo-na FUOC

bull Garciacutea Cabantildeas Raquel (2012) Desenvolupament drsquouna aplicacioacute interactiva El cas del mapa visual del pla drsquoestudis Barcelona FUOC

bull Monjo Palau Tona (2011) Disseny drsquointerfiacutecies multimegravedia Barcelona FUOC

bull Rodriacuteguez Joseacute Ramoacuten Marineacute Joveacute Pere (2014) Gestioacute de projectes Barcelona FUOC

bull Oposiciones TIC (2016) Arquitectura clienteservidor [en liacutenia] Disponible en lthttpsoposi-cionesticblogspotcomes201106arquitectura-cliente-servidorhtmlgt [Data de consulta 05 de marccedil del 2018]

MANUALS

bull Manual de PHP [en liacutenia] Disponible en lthttpphpnetmanualesindexphpgt

bull Extensioacuten MySQL mejorada [en liacutenia] Disponible en lthttpphpnetmanualesbookmysqliphpgt

bull ActionScript 30 Reference for the Adobe Flash Platform [en liacutenia] Disponible en lthttpshelpadobecomen_USFlashPlatformreferenceactionscript3gt

bull Guiacutea del usuario de Adobe Animate [en liacutenia] Disponible en lthttpshelpxadobecomesanima-teuser-guidehtmlgt

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia

64

APLICACIONSLes aplicacions analitzades en el punt 83 Anagravelisi de mercat poden ser locaclitzades a Google Play

Aplicacioacute 1 Easy Menu Planner httpsplaygooglecomstoreappsdetailsid=comoscardelgado83easymenuplanneramphl=ca

Aplicacioacute 2 Recetario recetas de cocinahttpsplaygooglecomstoreappsdetailsid=comvillyrecetarioamphl=es

Aplicacioacute 3 PLANIFOOD - Planificador inteligente de comidashttpsplaygooglecomstoreappsdetailsid=comdesarrollo4appplanifoodamphl=es

IMATGESTotes les imatges utilitzades en soacuten extretes de la plataforma Pixabay sota una llicegravencia de Creati-ve Commons

CC - No atribucioacute - Lliure per a uacutes comercial

Els enllaccedilos de descagraverrega soacuten

- ANNEX II MODELATGE DrsquoUSUARIS (persones)httpspixabaycomenman-portrait-adult-urban-style-3177583

httpspixabaycomenpeople-adult-portrait-music-3205412

httpspixabaycomenwoman-age-in-the-free-air-3186741

- ANNEX III LLIBRE DrsquoESTIL (telegravefon intelmiddotligent)httpspixabaycomensmartphone-icon-modern-symbol-1557796

TFG Desenvolupament drsquouna aplicacioacute per a la gestioacute de menuacutes i receptesSogravenia Pujol Fajardo

  • 1 Introduccioacute
  • 2 Descripcioacute de lrsquoaplicacioacute
  • 3 Objectius del projecte
    • 31 Objectius principals
    • 32 Objectius secundaris
      • 4 Metodologia
      • 5 Planificacioacute
        • 51 Fites i dates clau
        • 52 Diagrama de Gantt
          • 6 Proceacutes de treball
          • 7 Arquitectura de lrsquoaplicacioacute
            • 71 Client-Servidor
            • 72 Model-Vista-Controlador
              • 8 Anagravelisi pregravevia
                • 81 Anagravelisi de producte
                • 82 Anagravelisi de lrsquoaudiegravencia
                • 83 Anagravelisi de mercat
                  • 9 Disseny de la Base de Dades
                    • 91 Diagrama Entitat-Relacio (E-R)
                    • 92 Model Relacional
                      • 11 Arquitectura de la informacioacute
                        • 111 Continguts de lrsquoaplicacioacute GESTIOacute DrsquoUSUARI
                        • 112 Continguts de lrsquoaplicacioacute RECEPTARI
                        • 113 Continguts de lrsquoaplicacioacute GESTIOacute DE MENUacuteS (fora de projecte)
                        • 114 Continguts de lrsquoaplicacioacute AUTOMATITZACIOacute COMPRA (fora de projecte)
                        • 115 Abre de continguts
                        • 116 Prototips Lo-Fi Wireframes
                        • 117 Prototips Hi-Fi Mockups
                          • 12 Avaluacioacute de la usabilitat
                            • 121 Modificacions inicials
                            • 122 Evaluacioacute heuriacutestica
                            • 123 Avaluacioacute final
                              • 13 Projeccioacute a futur
                                • 131 Correccioacute funcionalitats bagravesiques
                                • 132 Millores de lrsquoaplicacioacute
                                • 133 Ampliacioacute de lrsquoaplicacioacute
                                  • 14 Conclusions
                                  • Annex I Lliurables del projecte
                                  • Annex II Codi font
                                  • Annex III Modelatge drsquousuari
                                  • Annex IV Llibre drsquoestil
                                  • Annex V Guia drsquousuari
                                  • Annex VI Bibliografia