S&P. Desenvolupament d'una aplicació per a la gestió de menús i...
Transcript of S&P. Desenvolupament d'una aplicació per a la gestió de menús i...
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
-