DESARROLLO DE APLICACIÓN
MULTIPLATAFORMA DE BÚSQUEDA Y
GESTIÓN DE RECETAS
Ca los Ma ínez Gu ié ez
(G ado en Ingenie ía del So wa e)
Alejand o Mon e o Roldán
(G ado en Ingenie ía In o má ica)
Ja ie Vicen e Cano
(G ado en Ingenie ía del So wa e)
T abajo de Fin de G ado
Di ec o : Manuel Mon eneg o Mon es
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
2
Ag adecimien os:
Le damos las g acias a Manuel Mon eneg o, nues o di ec o de
p oyec o, po su en e a disposición a ayuda nos siemp e an e cualquie
necesidad, así como su lexibilidad du an e odo el desa ollo.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
3
Índice
1. In oducción ......................................................................................... 8
1.1 An eceden es y mo i ación ............................................................ 8
1.2 Obje i os ........................................................................................ 9
1.3 Plan de abajo ............................................................................. 10
2. In oduc ion ....................................................................................... 12
2.1 Mo i a ion ................................................................................... 12
2.2 Objec i es .................................................................................... 13
2.3 Wo k plan .................................................................................... 14
3. Selección de he amien as y ecnologías ........................................... 16
3.1. Se icios ex e nos: APIs .................................................................. 16
3.1.1. Edamam [1] .............................................................................. 16
3.1.2. Yummly [2] ............................................................................... 17
3.1.3. Food2Fo k [3] ........................................................................... 18
3.1.4. BigO en [4] ............................................................................... 18
3.2. Tecnologías, lenguajes y amewo ks ............................................. 19
3.2.1. Apache Co do a [5] .................................................................. 19
3.2.2. HTML 5 [7] ................................................................................ 21
3.2.3. CSS 3 [8] ................................................................................... 21
3.2.4. Ma e ialize [9] .......................................................................... 22
3.2.5. Ja aSc ip [10] .......................................................................... 24
3.2.6. Node.js [11] .............................................................................. 24
3.2.7. Requi eJS [12] .......................................................................... 24
3.2.8. Sp ing boo [13] ....................................................................... 24
3.3. Ges o es de bases de da os ............................................................ 25
3.3.1. MySQL [14] ............................................................................... 25
3.4. He amien as adicionales ............................................................... 26
3.4.1. Gi hub [15] ............................................................................... 26
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
4
3.4.2. Google D i e [16] ..................................................................... 26
3.4.3. T ello [17] ................................................................................. 27
3.4.4. Edi o es de ex o: Sublime Tex [18] y A om [19] ..................... 27
3.4.5. PuTTY [20] ................................................................................ 28
3.4.6. Ske ch [21] ............................................................................... 28
3.4.7. VPS [22] .................................................................................... 29
4. Acceso a la API de Yummly ................................................................... 31
5. Algo i mo de búsqueda de ece as ....................................................... 44
5.1 P oblemas p incipales ..................................................................... 44
5.2 Fo ma o ac ual del algo i mo .......................................................... 45
5.2.1 Va iables u ilizadas .................................................................... 45
5.2.2 Resumen ................................................................................... 46
5.2.3 El algo i mo ............................................................................... 47
5.3 In en os p e ios del algo i mo ........................................................ 51
6. A qui ec u a de la aplicación de ece as............................................... 54
6.1 Base de da os y se ido p opio ...................................................... 54
6.1.1 Base de da os ............................................................................ 55
6.1.2 DB Se ices ................................................................................ 56
6.2 Aplicación mó il .............................................................................. 61
6.2.1 Modelo SPA (Single Page Applica ion) ....................................... 61
6.2.2 A qui ec u a .............................................................................. 63
6.2.2.1 Módulo View .......................................................................... 64
6.2.2.2 Con olado ............................................................................ 65
6.2.2.3 Módulo Logic .......................................................................... 65
6.2.2.4 Módulo DAO .......................................................................... 65
6.3 Diseño de las is as ......................................................................... 66
7. Conclusiones y abajo u u o............................................................... 74
7.1 Re isión de obje i os ....................................................................... 74
7.2 T abajo u u o ................................................................................. 75
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
5
8. Conclusions and u u e wo k ................................................................ 77
8.1 Re iew o objec i es. ....................................................................... 77
8.2 Fu u e wo k ..................................................................................... 78
9. Apéndice: Apo aciones de los in eg an es .......................................... 80
9.1 Ca los Ma ínez Gu ié ez ............................................................... 80
9.2 Alejand o Mon e o Roldán .............................................................. 82
9.3 Ja ie Vicen e Cano ......................................................................... 85
Resumen
El obje i o del p esen e abajo de in de g ado es el desa ollo de
una aplicación mul ipla a o ma que ecomiende ece as de cocina en
unción de los ing edien es que el usua io disponga en ese momen o. Es a
aplicación pe mi i á al usua io conoce ece as nue as e in e esan es pe o
siemp e eniendo en cuen a el hecho de que se puedan ealiza en ese
momen o, sin necesidad de comp a ing edien es adicionales.
Pa a usa es a aplicación, el usua io debe, en p ime luga ,
selecciona un ing edien e p incipal pa a su ece a, as lo cual la aplicación
mos a á al usua io una se ie de ing edien es adicionales. Pa a cada uno de
es os úl imos, el usua io debe á indica si dispone o no de dicho
ing edien e. Mien as ealiza es o, la aplicación mos a á aquellas ece as
que sean ealizables en unción de la disponibilidad de ing edien es, y
desca a á las no ealizables. Mien as an o, el usua io pod á consul a la
ece a deseada y ob ene oda la in o mación necesa ia pa a su
p epa ación.
Con es e p oyec o hemos ob enido una aplicación uncional que
ayuda en una a ea sencilla como elegi la comida del día o eciendo al
usua io una amplia a iedad de posibilidades iables con los ing edien es
disponibles. Además, es una buena base pa a la inco po ación de nue as
uncionalidades y en un u u o ce cano pode compe i en el me cado.

Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
6
Palab as cla e
Rece a, aplicación mul ipla a o ma, aplicación mó il, And oid, iOS,
ing edien es, alimen ación, cocina, API, Co do a.
Abs ac
The pu pose o his Final Deg ee P ojec is o de elop a mul i-
pla o m applica ion ha ecommends cooking ecipes, based on he
ing edien s ha he use accep s o disca ds depending on whe he hey
a e a ailable o no . This applica ion will allow he use o disco e new and
in e es ing ecipes, bu always aking in o accoun he ac ha hey can be
made a ha ime, wi hou he need o buy addi ional ing edien s.
To use his app, he use mus i s selec a main ing edien o his
ecipe, a e which he app will show se e al addi ional ing edien s o he
use . Fo each o hese ing edien s, he use mus indica e whe he he use
has his ing edien o no . While doing his, he app will selec hose ecipes
ha a e easible depending on he a ailabili y o ing edien s, and disca d
hose ha a e no . As soon as all he ing edien s necessa y o he
p epa a ion o a ecipe a e a ailable, he use can consul he desi ed ecipe
and ob ain all he necessa y in o ma ion o i s p epa a ion.
Wi h his p ojec we ha e ob ained a unc ional app ha helps in a
simple ask like choosing he meal o he day o e ing he use a wide a ie y
o iable possibili ies wi h he a ailable ing edien s. In addi ion, is a good
base o he inclusion o new ea u es and in he nea u u e o be able o
pa icipa e in he ma ke .
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
7
Keywo ds
Recipe, mul i-pla o m app, mobile app, And oid, iOS, ing edien s, ood,
cooking, API, Co do a.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
8
1. In oducción
En es e p ime capí ulo se explica á la mo i ación que nos ha lle ado a
desa olla es e p oyec o, así como odos los an eceden es de o as
aplicaciones simila es. También se desc iben los obje i os y el plan de
abajo seguido.
1.1 An eceden es y mo i ación
Cada ez exis en más aplicaciones de ece as que podemos ins ala en
nues o elé ono o able y, aunque muchas de ellas o ecen ca ac e ís icas
y uncionalidades in e esan es, ninguna abo da el p oblema del usua io que
cuen a con pocos ing edien es; a pesa de accede a muchas ece as, la
limi ación de ing edien es le impide encon a la adecuada.
A eces, el usua io es á condicionado po los ing edien es que iene
disponibles. O as eces, es á limi ado po el ing edien e p incipal y iene a
su disposición o os muchos ing edien es secunda ios. En ambos casos, las
aplicaciones exis en es no o ecen un mé odo sencillo de búsqueda que
acili e la selección de la ece a más con enien e.
Algunas aplicaciones en las que hemos encon ado es as limi aciones
son: Rece ix
1
, Rece as de cocina g a is
2
, Cookpad Rece as
3
, Cocina
T adicional (Rece as)
4
, Rece as de cocina case a g a is
5
y Nes lé Cocina
6
.
Es as aplicaciones disponen de un amplio ca álogo de ece as, pe o sus
unciones de búsqueda son bas an e es ic i as, pe mi iendo simplemen e
busca una ece a po nomb e, o po ca ego ía.
En es e p oyec o se p e ende desa olla una aplicación mul ipla a o ma
que esuel a odos es os p oblemas o eciendo la mejo expe iencia pa a
aquel cocine o que busca elabo a la mejo ece a posible sin necesidad de
1
h p://www. ece ix.com/
2
h ps://play.google.com/s o e/apps/de ails?id=com. ece asg a isne . ece asdecocina&hl=es
3
h ps://cookpad.com/es
4
h ps://cocina- adicional.es/
5
h ps://c a log.com/es/cocina/
6
h ps://www.nes lecocina.es/app-nes le-cocina
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
9
pe de la opo unidad po al a de ing edien es, p oponiendo al e na i as
con algún ing edien e adicional.
1.2 Obje i os
Debido a odo lo an e io men e explicado, el obje i o de es e p oyec o
es ealiza una aplicación mó il mul ipla a o ma que, de una mane a ápida,
in ui i a y amigable, p opo cione ece as basándose en cie os ing edien es
seleccionados y desca ados.
Pa a de ini el alcance del p oyec o hemos iden i icado cie os obje i os
cla e que debemos alcanza :
• Desa olla un algo i mo de búsqueda dinámica de ece as: La base
de la aplicación es la ob ención de ece as a pa i de cie os
ing edien es. Pa a ello hay que desa olla un algo i mo que,
eniendo en cuen a los ing edien es seleccionados y desca ados, la
limi ación de consul as al ca álogo de ece as y los iempos de
espe a, ob enga una lis a de posibles ece as pa a el usua io.
Decimos que la búsqueda es dinámica en an o que los c i e ios de
búsqueda de ece as se an e inando a medida que el usua io
in e ac úa con la aplicación.
• Selecciona una base de da os de ece as: Pa a acele a el desa ollo
de la aplicación amos a usa una base de da os ex e na de ece as
de cocina, accesible ía API a la que consul a emos las posibles
ece as con los ing edien es seleccionados.
• Diseña la a qui ec u a de la aplicación de búsqueda de ece as: Es
necesa io de ini los módulos de la aplicación y sus elaciones que
posibili en o ece una in e az de usua io mul ipla a o ma (And oid,
iOS, web...), ecoge los ing edien es seleccionados o desca ados,
consul a a la base de da os de ece as, aplica el algo i mo de
selección y mos a los esul ados al usua io.
• Diseña la in e az de usua io: Que emos c ea una in e az
in e ac i a en la que el usua io elija un ing edien e p incipal y la
aplicación aya p oponiendo ing edien es adicionales en un p oceso
i e a i o.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
16
3. Selección de he amien as y
ecnologías
An es de comenza con el desa ollo de la aplicación, se ealizó una
e aluación de la ecnología y de las he amien as más ap opiadas pa a su
desa ollo e implemen ación. Pa a ealiza una selección ue on u ilizados
c i e ios como la madu ez de las he amien as, la exis encia de expe iencia
p e ia en su manejo, el eedback de compañe os y p o eso es y la exis encia
de manuales de consul a.
A con inuación, se mos a án los se icios ex e nos con emplados,
con inuando con las ecnologías, lenguajes y amewo ks a des aca ,
siguiendo con los ges o es de bases de da os y e minando con las
he amien as adicionales.
3.1. Se icios ex e nos: APIs
Uno de los obje i os más impo an es del p oyec o ue el uso de una
API ex e na que p opo cione el mayo núme o de ece as posible. Se ealizó
un abajo ex enso en la búsqueda de APIs, in en ando consegui aquella
que se adap ase mejo a nues os equisi os. Se explo a on las siguien es:
3.1.1. Edamam [1]
Edamam es una s a up neoyo quina undada en 2011 con
inanciación p i ada que posee no más de 50 empleados. Su p incipal
se icio consis e en o ece da os sob e ece as y nu ición en iempo eal
pa a aho a iempo y dine o a sus clien es, en e los que se encuen an
Nes lé, Samsung y The New Yo k Times, en e o os.
Los se icios apo ados po es a API bene iciosos pa a el p oyec o e an los
siguien es:
• Inco po a ece as en español.
• Posee una documen ación ex ensa y bien especi icada.
• Con iene un amplio ca álogo, con 1,5 millones de ece as.

Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
17
• Median e una cuen a g a ui a se pueden ealiza has a 5000
pe iciones al mes. No obs an e, con ac amos con la emp esa, con el
in de in o ma les sob e nues o p oyec o, y nos concedie on un
mayo núme o de conexiones mensuales sin cos e ex a.
El p incipal incon enien e encon ado ue:
• La lis a de ing edien es de una ece a no es á no malizada. En
algunos casos se mezclan, den o de la misma cadena de ex o, el
ing edien e y la can idad a u iliza en la ece a. Es o di icul a
cla amen e nues o obje i o de ealiza búsquedas basadas en
ing edien es, y po ese mo i o ue desca ada.
3.1.2. Yummly [2]
Yummly se undó en el 2009 como una aplicación mó il y si io web
que p opo cionaba ece as de cocina. En 2013 hicie on pública su API pa a
que los desa ollado es puedan usa sus ece as en sus se icios.
Los p os con emplados ue on:
• Con iene más de 1 millón de ece as
• Usada po g andes en idades como Google, Unile e , la uni e sidad
de S an o d y Uni ed Heal hCa e.
• Documen ación ex ensa y bien especi icada.
• Pe mi e la exclusión de ing edien es en la búsqueda de ece as.
Los incon enien es con emplados ue on:
• Solo disponible en inglés.
• El plan es ánda cues a 500$/mes (pe mi e 250 mil pe iciones al mes
más 0’002$ ex a po cada pe ición adicional). Hay posibilidad de un
plan pa a es udian es (g a ui o, 30 mil llamadas a la API dándoles
a ibución).
La API de Yummly, debido a odas las en ajas que apo aba al p oyec o,
su plan académico y su ex ensa popula idad ue la API seleccionada pa a la
aplicación del p oyec o.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
18
3.1.3. Food2Fo k [3]
Food2Fo k es un si io web de ece as que combina los ing edien es y
la búsqueda po í ulo. Las ece as de Food2Fo k son de cocine os y che s
con amplia expe iencia en la cocina.
Los p os con emplados ue on:
• La e sión g a ui a pe mi e 500 pe iciones al día.
Los incon enien es con emplados ue on:
• Solo de uel e un máximo de 30 ece as po llamada.
• Documen ación muy pob e y poco ex ensa.
• Solo disponible en inglés.
3.1.4. BigO en [4]
BigO en ue iniciado po un e e ano del so wa e al que le encan a
cocina y deseaba pode busca las ece as de su amilia, así como dispone
de un amplio lib o de ece as pa a ap o echa al máximo lo que e a más
esco ese día.
Los p os con emplados ue on:
• O ece 350.000 ece as.
• Muy popula y con una al a calidad en sus da os
Los con as con emplados ue on:
• Solo disponible en inglés.
• Documen ación dispe sa y pob emen e explicada.
• No dispone de planes g a ui os.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
19
3.2. Tecnologías, lenguajes y amewo ks
A con inuación, se mues an odas las ecnologías, lenguajes y
amewo ks necesa ios pa a el desa ollo del p oyec o.
3.2.1. Apache Co do a [5]
Con la necesidad de encon a un amewo k que pe mi iese c ea
una aplicación mó il, Apache Co do a o eció la posibilidad de ealiza la
aplicación e i ando los lenguajes y he amien as na i os de cada
pla a o ma mó il.
Apache Co do a pe mi e, median e el uso de ecnologías web
es ánda como HTML5, CSS3 y Ja aSc ip , desa olla una aplicación mó il
mul ipla a o ma. De es a mane a se ealizó la aplicación en un en o no
web, en el cual los in eg an es del p oyec o es amos más amilia izados.
Además, la aplicación se diseñó según las pau as de diseño web adap able,
de modo que puede se ejecu ada an o en elé onos mó iles como en
able s.
Hay a ios componen es en una aplicación de Co do a. A
con inuación, se mues a una desc ipción de los p incipales, basada en la
documen ación o icial de Co do a [6]. El siguien e diag ama mues a una
is a de al o ni el de la a qui ec u a de una aplicación Co do a.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
20
Imagen ob enida de la página o icial de Apache Co do a [6]
El módulo Web App con iene el código de la aplicación. La aplicación
se implemen a en un a chi o local llamado index.h ml, el cual hace
e e encia a hojas de es ilo CSS, código Ja aSc ip , imágenes, a chi os
mul imedia y o os ecu sos necesa ios.
La aplicación se ejecu a en un componen e WebView, que no es más
que un na egado ejecu ándose a pan alla comple a den o del disposi i o
mó il.
Es e con enedo con iene un a chi o muy c ucial, el a chi o
con ig.xml que p opo ciona in o mación sob e la aplicación y especi ica los
pa áme os que a ec an su uncionamien o, como, po ejemplo, si es a
esponde a los cambios de o ien ación.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
21
Los añadidos (plugins) p opo cionan una in e az pa a pode
comunica se con los componen es na i os, como ba e ía, cáma a,
con ac os, e c. También se pueden desa olla nue os plugins, aunque no
hemos hecho uso de es a ca ac e ís ica.
Se gene a on una se ie de a chi os siguiendo la documen ación de
Co do a pa a cons ui un p oyec o. Además de c ea el p oyec o
mul ipla a o ma, Co do a pe mi e ejecu a dicho p oyec o den o de un
emulado .
3.2.2. HTML 5 [7]
HTML (Hype Tex Ma kup Language) es el lenguaje de ma cado
u ilizado pa a la elabo ación y es uc u ación de la página web u ilizada po
Co do a. Fue u ilizado pa a la cons ucción de los componen es es á icos
de la in e az de la aplicación, así como su uso en conjun o con Ja aSc ip
pa a la c eación de los elemen os dinámicos.
3.2.3. CSS 3 [8]
CSS (Cascading S yle Shee s) es el lenguaje enca gado de da es ilo a
la página web, en es e caso al documen o HTML. T abajando jun o con
Ma e ialize se han conseguido elemen os como, po ejemplo; mos a una
lis a de ece as posibles con la in o mación limi ada ( í ulo, o o, núme o de
ing edien es es an es, iempo y pun uación) y al pulsa sob e un elemen o
de es a lis a ob ene el nomb e de los ing edien es es an es y mos a un
bo ón pa a accede a la página donde se mues a oda la in o mación de la
ece a.

Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
22
3.2.4. Ma e ialize [9]
Buscando cómo c ea elemen os, encon amos Ma e ialize, que nos
ha p opo cionado el código necesa io pa a c ea los elemen os e
in e acciones mencionadas an e io men e.
C eado y diseñado po Google, Ma e ial Design es un lenguaje de
diseño que combina los p incipios clásicos del diseño con la inno ación y la
ecnología. El obje i o de Ma e ial Design es desa olla un sis ema de
diseño que pe mi a una expe iencia de usua io uni icada a a és de odos
sus p oduc os en cualquie pla a o ma, en nues o caso pa a mó il y able .
Adap ándose co ec amen e a la página web, Ma e ialize pe mi e
asigna es ilos y compo amien os a algunos componen es de la aplicación,
que de o o modo hubiesen sido demasiado complejos de implemen a
pa a los miemb os del p oyec o. Además, p opo ciona a ios componen es
g á icos que acili an la concepción y el diseño de la in e az g á ica.
Ha sido un éxi o abaja con Ma e ialize po que con iene una lis a
muy ex ensa de elemen os que pueden se inco po ados en la in e az
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
23
g á ica de una aplicación, ob eniendo ideas an buenas como el loade
ci cula o los collapsibles.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
24
3.2.5. Ja aSc ip [10]
Lenguaje de p og amación in e p e ado, usado p incipalmen e en
na egado es web. Ha sido esencial pa a c ea la lógica de la aplicación.
3.2.6. Node.js [11]
Es un en o no de ejecución pa a Ja aSc ip cons uido con el mo o
de Ja aSc ip V8 de Ch ome. Node.js usa un modelo de ope aciones E/S sin
bloqueo y o ien ado a e en os, que lo hace li iano (pues no equie e
p og amación mul iheb a) y e icien e. Posee un egis o de lib e ías (NPM
Regis y), que puede se accedido desde la línea de comandos median e el
ges o de paque es de Node: npm. El ecosis ema de paque es de Node.js es
el ecosis ema más g ande de lib e ías de código abie o en el mundo.
Pa a ins ala Co do a Apache ue necesa io Node.js po que la línea
de comandos de Co do a se ejecu a en bajo es e en o no.
3.2.7. Requi eJS [12]
Requi eJS es un ca gado de a chi os y módulos ja asc ip . Es á
op imizado pa a el uso en el na egado , pe o se puede usa en o os
en o nos de Ja aSc ip , como Rhino y Node.js. El uso de un ges o de sc ip s
modula como Requi eJS mejo a la elocidad y la calidad del código,
ocupándose de las dependencias de los módulos.
Desde el p incipio nos encon amos con el p oblema de di idi el
código en módulos ya que Ja asc ip , has a sus úl imas e siones, no
disponía de un sis ema que lo pe mi iese. Con Requi eJS conseguimos
di idi lo y c ea una a qui ec u a simila al pa ón Modelo Vis a
Con olado , de o ma que sea más ácil ac ualiza , lee y man ene el
código en el u u o.
3.2.8. Sp ing boo [13]
Du an e el desa ollo de Recipee s u imos la necesidad de c ea un
se icio conec ado a la base de da os que nos p opo cionase imágenes de
ing edien es pa a mejo a la expe iencia de usua io y a la ez alige a el
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
25
peso de la aplicación al no ene que gua da odas las imágenes
localmen e. Pa a ello decidimos c ea lo con Sp ing Boo .
Sp ing Boo p esen a ca ac e ís icas como c ea aplicaciones sencillas
con un se ido Tomca in eg ado, con igu ación au omá ica siemp e que
sea posible y adap able a a ios en o nos y ex e nalizada. Todo ello e i a
gene a más código del necesa io y ene que c ea una con igu ación XML.
3.3. Ges o es de bases de da os
3.3.1. MySQL [14]
Du an e el desa ollo de la aplicación ue necesa ia la adminis ación
de una base de da os. Nues a base de da os es una simple lis a de
ing edien es con su ca ego ía y o o asociada.
MySQL es un sis ema de ges ión de bases de da os elacional
desa ollado po O acle Co po a ion y es á conside ada la como la base
da os de código abie o más popula del mundo, sob e odo pa a en o nos
de desa ollo web.
MySQL es usado en si ios como Wikipedia, Google (aunque no pa a
búsquedas), Facebook, Twi e , Flick , y YouTube.
P opo ciona una API pa a pode conec a se con dis in os lenguajes,
es á disponible en dis in as pla a o mas y sis emas, pe mi e selecciona el
mecanismo de almacenamien o, u iliza una conexión segu a, u iliza
eplicación y ealiza una búsqueda e indexación de campos de ex o.
MySQL ue seleccionada po su ácil uso, además de po el hecho de
que odos los miemb os del p oyec o lo han ap endido a u iliza du an e la
ca e a. Se que ía una base de da os simple y ápida de c ea y MySQL
cumplía odos esos equisi os.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
32
• Técnicas de cocinado
Median e es e il o puede exclui se, po ejemplo, ece as que puedan
eque i de un ho no en caso de que el usua io no disponga de uno.
El se icio que usamos de Yummly es su API, que p opo ciona más de un
millón de ece as, ob enidas a pa i de los blogs más popula es de comida
y webs de ece as.
La API in en a ajus a se a los p incipios de REST. Es deci , las pe iciones
HTTP ca ecen de es ado; se basa en ope aciones sencillas como GET y POST,
y en el uso de hipe medios. Los da os son de uel os en o ma o JSON y
sopo a JSONP como codi icación al e na i a. G acias a JSONP pudimos
supe a el p oblema de XSS al ealiza las llamadas a la API desde un
Ja aSc ip en un na egado . Los na egado es bloquean el uso del obje o
XMLH pReques (XHR) al hace una pe ición AJAX a dominios di e en es
del de la p opia página, po lo que al se yummly un dominio ex e no
u imos que u iliza JSONP que, en luga de hace una llamada con el obje o
XHR, encapsula en una unción ja asc ip el obje o JSON.
Po ejemplo, en luga de de ol e un obje o del ipo { ece a:X},
de uel e la llamada callback({ ece a:X}). Esa llamada se inse a en el DOM
den o de una e ique a sc ip y de esa o ma podemos ejecu a la unción
callback con el JSON como pa áme o.
El endpoin al que llamamos pa a usa la API es
h ps://api.yummly.com/ 1 y posee dos llamadas dis in as pa a ob ene
in o mación sob e ece as: Ge Recipe, pa a ob ene los da os de una ece a
especí ica y Sea ch Recipes pa a busca y il a ece as.
La p incipal condición pa a usa el se icio de la API de Yummly es
acep a los é minos y condiciones del mismo, lo cual solo se ga an iza
c eando una cuen a de desa ollado en su página y a i mando que se han
leído, comp endido y acep ado.
Una ez c eada la cuen a, pa a pode llama a la API hay que añadi en
la URL o en la cabece a HTTP unos iden i icado es acili ados po Yummly
as ealiza la insc ipción en cualquie a de planes que o ece. Noso os
solici amos una cuen a pa a es udian es g a ui a limi ada a 30 mil

Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
33
pe iciones que hemos es ado usando du an e odo el desa ollo del
p oyec o.
Dado que es amos usando los se icios de Yummly y an o en sus
é minos y condiciones como en la documen ación de la API así lo pide,
es amos obligados a mos a a ibución a la ho a de mos a las ece as. Las
espues as p opo cionadas po la API inco po an, p ecisamen e, e ique as
HTML y un a chi o de imagen del logo ipo de la emp esa pa a acili a nos
el p oceso.
Es a API solamen e o ece con enidos en inglés. Al p incipio del p oyec o
eníamos la in ención de ealiza una aplicación en cas ellano debido a que
la API inicial que p e endíamos usa (Edamam) o ecía ambién los
con enidos en español. O a azón es que muchos de nues os amilia es y
amigos (no anglopa lan es) nos pidie on, al conoce el p oyec o, que
cuando la aplicación es u iese lis a se la acili ásemos, po que les
in e esaba pa a su día a día.
Al inal, as oma la decisión de u iliza Yummly, quisimos e i a ene
que aduci ece as, ing edien es y di e sa in o mación ex a como
ca ego ías, da os nu icionales y ex os de la aplicación. Po an o,
pensamos que se ía mejo cen a se en la uncionalidad del p oduc o y no
dedica una can idad excesi a de iempo a o ece la aplicación en
cas ellano. No obs an e, no desca amos que en un u u o la he amien a
pe mi a di e en es idiomas.
La g an en aja que nos da es a API (apa e de su amplia gama de ece as
e in o mación elacionada) en e a o as de la compe encia es que pe mi e
especi ica una lis a de ing edien es que no que emos que apa ezcan en los
esul ados de búsqueda. G acias a es o, podemos añadi en es a lis a odos
aquellos ing edien es que el usua io ha con i mado que no posee y, de esa
mane a, ninguna de las ece as que de uel e la API con iene dichos
ing edien es.
Aún así, a nues o pa ece p esen a algunas des en ajas que nos han
complicado el desa ollo, y que han hecho que nues o algo i mo de
búsqueda de ece as (que se desc ibi á en el capí ulo siguien e) sea más
complejo:
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
34
• Disyunción de ing edien es admi idos
De la misma o ma que la API acep a como pa áme os cie os
ing edien es que no que emos que apa ezcan en los esul ados de
búsqueda, ambién nos pe mi e añadi ing edien es que sí que emos que
apa ezcan. Aunque el p opósi o sea simila ( ealiza un il o po
ing edien es), la o ma de hace lo di ie e. El sis ema de uel e aquellas
ece as que con engan odos los ing edien es de la lis a de admi idos, y que
no con engan ninguno de los ing edien es de la lis a de echazados. Es
deci , se ealiza una AND de los ing edien es admi idos, y se ealiza una OR
de los echazados. De o ma que cuando añadimos dos ing edien es pa a
exclui , sald án ece as que no ienen ninguno de esos dos ing edien es,
echazando aquellas que engan uno de ellos o los dos. Si esos dos
ing edien es es u iesen en la lis a de admi idos, solo sald ían ece as que
incluyesen los dos a la ez. Debido a eso, u imos que ealiza el algo i mo
de que in en ase maximiza la can idad de ece as que u iesen el mayo
núme o de ing edien es a ines al usua io, pe o sin necesidad de ene los
odos.
• Fo os de los ing edien es
Dado que la API no o ece o os de los ing edien es, nos imos en la
necesidad de dispone de una base de da os p opia con imágenes de
ing edien es, pa a así añadi en es a base de da os una u a a la imagen del
ing edien e y de ol e la. Po o o lado, los ing edien es no es án
ca ego izados en la API, po lo que u imos que es ablece dis in as
ca ego ías de ing edien es y almacena las en la base de da os p opia.
• Fo os con al a calidad de las ece as
Al pedi a la API una búsqueda de ece as, es a nos de uel e in o mación
básica sob e la misma como el iden i icado , í ulo, ing edien es básicos y
una o o, en e o os da os. Esa o o no suele ocupa demasiado y es á
pensada pa a se mos ada en un o ma o educido. Pa a pode mos a
una o o más g ande end íamos que hace una consul a especí ica sob e
cada ece a ob enida, solici ando una imagen de mayo esolución,
haciendo que se dispa e el núme o de pe iciones a la API. Dado que las
llamadas que enemos son limi adas, nos hemos limi ado a mos a la
imagen de baja esolución.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
35
• Fal a de ins ucciones de p epa ación de la ece a
Dado que no disponemos de una lis a de ins ucciones po pa e de la API
pe o sí del enlace a la ece a, nos hemos is o obligados a edi igi a una
página ex e na pa a pode mos a la in o mación de la ece a, lo que se
aduce en una expe iencia algo más incómoda pa a el usua io, pues ya no
es posible mos a oda la in o mación de una ece a uni icada en la misma
aplicación.
Llamadas ealizadas:
Como habíamos mencionado an e io men e, exis en dos llamadas
pa a el ámbi o de las ece as: Ge Recipe y Sea ch Recipes. Adicionalmen e,
exis e una llamada especial pa a ob ene dicciona ios de da os en los que
mues a in o mación sob e los ipos de cocina, ing edien es, die as, e c.
Pa a el desa ollo del p oyec o no hemos conside ado que es a úl ima nos
uese de mucha u ilidad.
Sea ch Recipes
La llamada más u ilizada po la aplicación. Su sin axis básica se ía:
h p://api.yummly.com/ 1/api/ ecipes?
_app_id = nues o_app_id &
_app_key = nues a_app_key &
pa ame os_de_busqueda
El app_id y el app_key son los iden i icado es que nos acili ó
Yummly a la ho a de egis a nues a aplicación.
De odos los pa áme os de búsqueda exis en es hemos usado los
siguien es:
• q
Ing edien e p incipal. Aquí inse amos el ing edien e que el usua io
escogió desde el menú p incipal de la aplicación.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
36
• allowed ing edien
A ay de Ing edien es que que emos que apa ezcan en la ece a. Se
mos a án aquellas ece as que con engan odos los ing edien es indicados
en es e a ay.
• excluded ing edien
A ay de Ing edien es que no deseamos que apa ezcan en los
esul ados. Se mos a án aquellas ece as que no con engan alguno de los
ing edien es especi icados.
• ace Field
Cuando se in oduce es e pa áme o la llamada inco po a, además de
los esul ados de la búsqueda, un obje o llamado ace Coun s que
enume a la can idad de ing edien es o die as que han apa ecido en la
espues a.
Realizamos esa llamada haciendo una búsqueda de odas las ece as que
exis en, con el pa áme o ace Field solici ando los ing edien es. De es a
o ma conseguimos el núme o de eces que apa ece cada ing edien e y
podemos conoce en odo momen o qué ing edien es son más popula es.
• maxResul
Máximo núme o de ece as que que emos que apa ezcan. En nues o
caso, solici amos 100 ece as pa a que el iempo de espues a de la API no
se demo e demasiado
Con es os pa áme os, la espues a de la API de uel e una lis a de
ece as, un con ado , y un obje o con e ique as HTML e imágenes pa a
ealiza la a ibución de los esul ados de búsqueda a Yummly.
En caso de que hubiésemos añadido el pa áme o ace Field,
de uel e un obje o ace Coun s con ing edien es y el núme o de ece as
en las que apa ece cada uno de los ing edien es.
A con inuación, pasamos a desc ibi el o ma o de las ece as de uel as
po la llamada a Sea ch Recipes. Po cada ece a ob enemos:
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
37
• imageU lsBySize
Lis a de enlaces a imágenes de la ece a con di e sos amaños. En odas
las ece as con empladas has a el momen o siemp e hemos is o un único
enlace a una imagen de amaño muy educido.
• smallImageU l
Minia u a de la ece a. Muy simila a la imagen pequeña de uel a po
imageU lsBySize.
• sou ceDisplayName
Nomb e del p o eedo de la ece a
• ing edien s
Lis a de ing edien es de la ece a
• id
Iden i icado de la ece a.
• ecipeName
Nomb e de la ece a
• o alTimeInSeconds
Tiempo es imado pa a ealiza la ece a
• a ibu es
Aquí se indica el es ilo gas onómico al que pe enece, si puede con ene
algún alé geno, qué ipo de pla o es, e c.
• la o s
Pun uación pa a cada uno de los sabo es (salado, dulce, pican e, e c.),
cada una en un ango de 0 a 1.

Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
38
Un ejemplo de es a llamada se ía (el o ma o de las u ls de los ejemplos
han sido lige amen e modi icadas pa a acili a su lec u a):
h ps://api.yummly.com/ 1/api/ ecipes?
callback = callback&
_app_id = nues o_app_id&
_app_key = nues a_app_key&
maxResul = 1
&excludedIng edien [] = g anula ed suga &
allowedIng edien [] = s awbe y&
allowedIng edien [] = s awbe ies&
allowedIng edien [] = cool whip&
allowedIng edien [] = honey g aham c acke s
Algunos pa áme os del ejemplo son:
• maxResul a 1 pa a que solo nos de uel a una ece a
• excludedIng edien con g anula ed suga
• allowedIng edien con cua o ing edien es: honey g aham
c acke s, s awbe ies, s awbe y y cool whip
• callback como nomb e de unción usando JSONP
La espues a de uel a po la API se mues a a con inuación:
callback({
"c i e ia":{
"allowedIng edien ":[
"honey g aham c acke s",
"s awbe ies",
"s awbe y",
"cool whip"
],
"excludedIng edien ":[
"g anula ed suga "
],
"q":null
},
"ma ches":[
{
"imageU lsBySize":{
"90":"h p://lh3.googleuse con en .com/mUH5o4d-
08W3XLSLw3-
BeJjhiw6bR yBx Ri oW 8PcHuH LQ1 UMdR5uQ124K97K qL8su7G5DPE-
9Ay3gnBw=s90-c"
},
"sou ceDisplayName":"Sp inkle Some Suga ",
"ing edien s":[
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
39
"s awbe ies",
"honey g aham c acke s",
"cool whip"
],
"id":"S awbe y-Icebox-Cake-1105715",
"smallImageU ls":[
"h p://lh3.googleuse con en .com/EN9UhNg jS7Ue
VjBAcDuTnlwnz FQZQlxOJFDZlp 178KU xuxWlaj 42B2VMmboZXKn4uYj
96 UxDDOB0j3j0A=s90"
],
" ecipeName":"S awbe y Icebox Cake",
" o alTimeInSeconds":15000,
"a ibu es":{
"cou se":[
"Desse s"
]
},
" la o s":{
"swee ":0.6666666666666666,
"piquan ":0.0,
"sou ":0.8333333333333334,
"sal y":0.16666666666666666,
"mea y":0.16666666666666666,
"bi e ":0.16666666666666666
},
" a ing":4
}
],
" ace Coun s":{
},
" o alMa chCoun ":3,
"a ibu ion":{
"h ml":"Recipe sea ch powe ed by <a
h e ='h p://www.yummly.co/ ecipes'><img al ='Yummly'
s c='h ps://s a ic.yummly.co/api-logo.png'/></a>",
"u l":"h p://www.yummly.co/ ecipes/",
" ex ":"Recipe sea ch powe ed by Yummly",
"logo":"h ps://s a ic.yummly.co/api-logo.png"
}
});
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
40
Ge Recipe
Nues a aplicación solamen e ealizaba es a llamada si el usua io
enía in e és en la ece a y en aba a e sus de alles. Su sin axis básica es:
h p://api.yummly.com/ 1/api/ ecipe/id_ ece a?
_app_id = nues o_app_id &
_app_key = nues a_app_key
Dado que el único alo que ealmen e a ía es el id de la ece a (ya
incluido en la URL), no es necesa io inclui ningún pa áme o de en ada.
Los da os que de uel e son:
• nu i ionEs ima es
Pa áme os nu icionales. Fo ma una lis a de nu ien es y la can idad po
ación. No apa ecen en odas las ece as, solo en las que Yummly iene
segu idad sob e su p ecisión.
• o alTime
Tiempo es imado en ealiza la ece a.
• images
A ay de imágenes de di e en es amaños.
• name
Nomb e de la ece a.
• sou ce
Da os sob e el o igen de la ece a.
• id
Iden i icado de la ece a o mado po palab as cla e de la ece a
sepa adas po guiones (-) y un núme o al inal. Ejemplo: C ock-Po -Bbq-
Chicken-D ums icks-2422597
• ing edien Lines
Lis a de ing edien es de allados mos ando can idad y, en ocasiones,
de alles sob e cómo se necesi a p epa a el ing edien e (po ejemplo,
oceado)
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
41
• a ibu ion
E ique as HTML, enlaces y logo ipo de Yummly pa a la a ibución.
• yield
Núme o de aciones de la ece a, mos ado en o ma o de ex o (po
ejemplo, “4 aciones”)
• numbe O Se ings
Núme o de aciones mos ado de o ma numé ica (po ejemplo, 4).
• a ibu es
Al igual que en la unción Sea ch Recipes, aquí se indica el ipo de
cocina a la que pe enece, si puede habe algún alé geno, qué ipo de pla o
es, e c.
• la o s
Aquí ambién se indica la pun uación pa a cada uno de los sabo es en
un ango de 0 a 1
• a ing
Pun uación de la ece a según la web de Yummly.
Un ejemplo de uso del se icio Ge Recipe se ía:
h p://api.yummly.com/ 1/api/ ecipe/Jello-Pa ai -2423089?
_app_id = nues o_app_id &
_app_key = nues a_app_key &
callback = callback
El único pa áme o que se usa apa e del nomb e de la unción pa a
u iliza JSONP, es el iden i icado como pa e de la u a que iden i ica a la
ece a (Jello-Pa ai -2423089)
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
48
Al inicio odas las a iables con ienen un a ay acío
excep o nRecipes y min_ ecipes, pe o pa a el inicio del algo i mo
necesi amos asigna un alo dis in o a algunas de las a iables.
En p ime luga , se inicializa HTopIng, con el in de ob ene un
HashMap que u iliza emos pa a elegi los ing edien es más usados y así
mos a a los usua ios los ing edien es más comunes en las ece as. Al ene
es e mapa pod emos educi el núme o de desca es de ing edien es ya que
se p opo cionan al usua io los ing edien es más u ilizados, siendo es os po
an o los más comunes en casa.
Pa a inicializa la a iable se ealiza una pe ición a la API (con el
a ibu o ace Field, explicado en el capí ulo 4) que de uel e el núme o de
ece as en las que apa ece cada ing edien e, de mane a que ob end emos
un mapa con cla e el ing edien e y alo su núme o asociado.
Una ez inicializadas las a iables, se le pide al usua io que seleccione
un ing edien e p incipal de en e los que le p opo cionamos. Es e
ing edien e se á asignado a la a iable p incipal.
Aho a ya comienza la ase de acción omando dicho ing edien e
p incipal como el p ime ing edien e que ha sido acep ado.
5.2.3.2 Fase de acción
La ase de acción de e mina las acciones a ealiza desde que el
usua io acep a o desca a un ing edien e has a que se le mues a el
siguien e ing edien e con la lis a ac ualizada de ece as candida as.
En unción de si el usua io acep a o desca a el ing edien e se debe
ac ua de mane a o almen e dis in a. Po ello, la p ime a pa e del
algo i mo se di ide en dos casos, acep ación o desca e del ing edien e, y
inaliza con una pa e común a ambas bi u caciones.
A. Caso de acep ación
En es e caso se inse a á el ing edien e acep ado en la lis a de
seleccionados LSelec ed. Después ac ualiza á el núme o de ing edien es
cuya disponibilidad es á aún po de e mina en cada una de las ece as de
LRecipesUse . A con inuación se p ocede á a llama a la unción Sea ch
Recipes de la API con los ing edien es seleccionados y los desca ados,

Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
49
ecibiendo una lis a con un máximo de nRecipes ece as que cumplen los
equisi os.
T as ob ene es as ece as de la API debemos p ocesa las. P ime o
elimina emos odas aquellas que ya pe enezcan a LRecipeAssess ed ya
que se ían ece as que ya se han ecupe ado p e iamen e, y po an o o ya
han sido desca adas o es án ac ualmen e en LRecipesUse . Después
o denamos las ece as es an es po el núme o de ing edien es que al an
po acep a o desca a y ob enemos las 10 p ime as, que añadimos a
LRecipesUse y a LRecipeAssess ed. En onces ya sólo queda o dena
LRecipesUse y ya end íamos ac ualizada la lis a de ece as que se
mues an al usua io.
B. Caso de desca e
En es e caso enemos como en ada el ing edien e que el usua io ha
desca ado, el cual incluimos en la lis a de ing edien es desca ados
LExcluded. A con inuación bo amos de LRecipesUse las ece as que
con ienen ese ing edien e.
Si, as la eliminación, se iene un núme o de ece as supe io al
mínimo (min_ ecipes), se llama a la API igual que en el caso de acep ación,
con los ing edien es seleccionados y desca ados, y se p ocesa la espues a
de la mane a indicada an e io men e.
En caso de no ene un mínimo de ece as pasamos a una unción
llamada o de ingCalls() que se enca ga de ob ene ese mínimo en caso
de se posible .
O de ingCalls(nLlamadas, callback): Es a unción ecu si a
ecibe un alo numé ico, que pe mi e delimi a el núme o de llamadas
ecu si as, y una unción callback. En onces selecciona de mane a alea o ia
un ing edien e pe enecien e a LSelec ed, comp ueba que es a lis a
con enga más de un ing edien e, además del seleccionado (en caso
con a io el ing edien e seleccionado hubie a sido el p incipal), y que ese
ing edien e seleccionado alea o iamen e no sea el p incipal. Después suma
uno a nLlamadas y ealiza una pe ición a la API con esos dos ing edien es
cono seleccionados únicamen e y odos los desca ados. En caso de habe
un solo ing edien e ealiza ía la llamada únicamen e con ese ing edien e,
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
50
que se ía el p incipal. T as p ocesa la espues a como siemp e, si no exis e
el mínimo de ece as eque ido y nLlamadas aún no han llegado al máximo
es ablecido (10 ac ualmen e), ol e á a llama a la misma unción,
o de ingCalls(nLlamadas, callback).
C. Pa e inal (Común a ambos casos)
Una ez que hemos ob enido las ece as (LRecipesUse ), debemos
ob ene el ing edien e que mos a emos al usua io. Pa a ello se ob iene la
p ime a ece a de la lis a, que al es a o denada se á la que es é más ce ca
de se acep ada, siendo la que menos ing edien es que al an po acep a
o desca a le quedan. Obse amos dichos ing edien es y de ellos
mos amos al usua io aquel que iene un mayo alo en HTopIng, ya que,
al se el ing edien e más usado, exis e una mayo p obabilidad de que el
usua io disponga de él.
5.2.3.3 Fase de inalización
La ase de inalización empieza en el momen o en el que el usua io
se decide ealiza una de las ece as que se le o e an. En onces el algo i mo
ealiza á una llamada a la API median e la unción Ge Recipe con el Id de
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
51
dicha ece a, ob eniendo oda la in o mación que se le mos a á al usua io:
In o mación nu icional, ing edien es y sus can idades, enlace a la web
donde se de alla la p epa ación.
5.3 In en os p e ios del algo i mo
Desde que comenzamos a pensa en el algo i mo u imos muy
p esen e el hecho de ene limi ado el núme o de llamadas a la API. Nues o
obje i o desde el p incipio e a consegui que el usua io llegase a una ece a
de su gus o lo an es posible, y eso se podía consegui con un mayo
p ocesado de ece as que diese p io idad a aquellas ece as que con engan
un mayo núme o de ing edien es acep ados po el usua io. Po eso se
pensó inicialmen e que lo mejo e a ob ene , con un núme o educido de
llamadas, la mayo can idad posible de da os de la API pa a así se
p ocesados en ejecución.
T as ealiza di e en es p uebas sencillas de pe iciones de búsqueda
basándonos en di e en es ing edien es que eníamos y que habíamos
desca ado nos dimos cuen a de dos aspec os muy impo an es que
condiciona on la mane a de diseña el algo i mo. Po un lado, cuando se
solici aba un máximo de 800 ece as, el iempo de espues a de la API se
dispa aba, haciendo in iable in en a ob ene un olumen ele ado de da os
pa a se p ocesado. Po o o lado, si in en ábamos hace una búsqueda
muy es ic i a, es deci , con muchos ing edien es eque idos y
desca ados, no ob eníamos ninguna ece a que cumpliese es os é minos.
Llegados a es e pun o nos dimos cuen a de que el desa ollo de el
algo i mo dependía muchísimo de las limi aciones de la API, eniendo como
p oblemas p incipales el no pode hace ni un g an núme o de llamadas ni
hace llamadas que de uel an g an can idad de da os.
Al es a a ascados en es e p oblema, decidimos in en a o o
en oque en el diseño del algo i mo y nos cen amos en de e mina cómo
ob ene el siguien e ing edien e que se mos a ía al usua io. Nos dimos
cuen a de que ealmen e siemp e hay cie os ing edien es más comunes en
una cocina que o os, y cu iosamen e es os mismos ing edien es se
u ilizaban en muchísimas ece as di e en es. Comp endimos que aquellos
ing edien es que más salen en las ece as son los que se suelen ene en
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
52
casa y po an o, e an los que eníamos que mos a an es al usua io. Pa a
ello elabo amos un HashMap (HTopIng) que con enía como cla e el
nomb e del ing edien e y alo el núme o de ece as en las que apa ece.
T as ene de inido el c i e io a u iliza pa a ob ene el ing edien e a
mos a eníamos que sabe de dónde íbamos a ob ene dicho ing edien e.
Lo lógico e a ob ene lo de la ece a que menos ing edien es po de e mina
con u iese, ya que el obje i o es consegui que el usua io pueda ealiza
una ece a cuan o an es. Po an o, debíamos ene las ece as o denadas
de meno a mayo po el núme o de ing edien es que les al asen po
selecciona .
Aho a en a en cues ión cómo íbamos a gua da y ob ene esas
ece as. Nues a p ime a idea implicaba que el algo i mo cons uyese un
á bol donde cada nodo co esponde ía a una lis a de ece as como
esul ado de una llamada a la API, eniendo en las hojas las llamadas de un
solo ing edien e y en la aíz la llamada con odos los ing edien es
seleccionados has a el momen o, y siemp e eniendo en cuen a que cada
llamada a la API debía es a es ingida po 100 ece as.
El uncionamien o e a el siguien e: as una llamada se gua daban las
100 ece as en el nodo co espondien e y se ob enían las 10 “mejo es”, es
deci , las 10 con el meno núme o de ing edien es po acep a o desca a ,
que íbamos compa ando con las que ya habíamos ob enido como mejo es
an es y ac ualiza íamos esa lis a, que se ía la lis a mos ada al usua io. De
esa lis a ob end íamos el siguien e ing edien e y si el usua io lo echazaba
hacíamos la misma llamada an e io con uno más en desca ados
sob esc ibiendo ese nodo. En caso de acep a el ing edien e añadíamos un
nodo aíz con la lis a de ece as de una nue a pe ición con odos los
ing edien es.
Pe o es e algo i mo enía un g a e incon enien e, ya que, cuan os
más ing edien es hubiese, menos ece as hab ía en la aíz del á bol y po
an o más di ícil ol e a ellena la lis a del usua io, ya que hab ía que i
eco iendo los nodos siguien es has a encon a ece as p e iamen e no
ges ionadas.
T as un iempo alo ando di e en es al e na i as, nos dimos cuen a
de que la cla e consis ía en ene almacenadas en la lis a del usua io el
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
53
mayo núme o de ece as álidas posible, aunque no le mos ásemos odas.
De es a mane a, cada ez que el usua io acep ase o desca ase un
ing edien e, se ac ualizase esa lis a con las nue as inco po aciones de la
llamada (solo una selección de las que de uel e la API) y eliminase aquellas
que ya no alían en caso de con ene el ing edien e desca ado.
Sólo quedaba el p oblema que se p oduci ía en caso de que el usua io
echazase an os ing edien es que la lis a de ece as del usua io se aciase.
En ese caso pod ía pensa se en ol e a ealiza una búsqueda de aquellas
ece as que con u iesen odos los ing edien es acep ados has a el
momen o, pe o nos dimos cuen a que si había demasiados ing edien es
acep ados la espues a de la API se ía acía, ya que, po ejemplo, no exis en
ece as que u iesen 20 ing edien es dis in os. Po an o, decidimos que
e a más impo an e consegui ece as de mane a ápida que busca la
ece a con más ing edien es ya seleccionados y po ello desa ollamos la
unción o de ingCalls que simplemen e llamaba a la API con un
ing edien e alea o io seleccionado y el p incipal has a ob ene el núme o
mínimo de ece as eque ido.

Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
54
6. A qui ec u a de la aplicación de ece as
En es e capí ulo se de alla la es uc u a de la aplicación, haciendo
hincapié en la a qui ec u a di ida en módulos, en el desa ollo del backend
de la base de da os y los se icios web y el diseño de las is as.
6.1 Base de da os y se ido p opio
Aunque el p oyec o que desa ollamos es una aplicación mó il, nos
imos en la necesidad de apoya su uncionamien o en un se ido ex e no
(VPS alojado en OVH [22]), debido a dos si uaciones a las que nos
en en amos:
• Imágenes de los ing edien es
Pa a mejo a la expe iencia de usua io, imos opo uno mos a una
imagen del ing edien e po el que p egun ábamos al usua io. La API de
ece as de la que hemos hecho uso (Yummly) no p opo cionaba dicha
imagen, po lo que debíamos p opo ciona la noso os mismos. En caso de
que hubiésemos almacenado esas imágenes en la p opia aplicación, hab ía
aumen ado conside ablemen e la can idad de espacio en disco u ilizada, y
el amaño del iche o apk u ilizado pa a dis ibui la aplicación. Uni icando
la uen e de esas imágenes en un se ido ambién nos da la en aja de que,
en caso de i añadiendo en el u u o más o og a ías, el usua io pod ía
dis u a las al ins an e, sin ene que ac ualiza la app a la siguien e e sión.
• Ca ego ía de los ing edien es
Nada más ab i la aplicación se le o ece al usua io la opción de escoge un
ing edien e como ing edien e p incipal de sus ece as. Pa a pode ayuda
en ese p oceso de selección al usua io, hemos ca ego izado los ing edien es
más ele an es. Es a ca ego ización ampoco iene p opo cionada po
Yummly.
Dado que necesi amos in o mación sob e los ing edien es y en un
u u o puede que necesi emos más, decidimos usa una base de da os con
oda esa in o mación y un se icio web pa a pode accede a esos da os.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
55
6.1.1 Base de da os
En el se ido ambién hemos desplegado una base de da os MySQL
pa a aloja odos los da os que necesi emos sob e los ing edien es.
La base de da os se compone de una abla desc i a de la siguien e
mane a:
Field
Type
Null
Key
De aul
Ex a
id
in (11)
NO
PRI
NULL
au o_inc emen
name
a cha (128)
YES
NULL
pic u e
a cha (128)
YES
NULL
ca ego y
a cha (128)
YES
NULL
El campo id es un campo numé ico au oinc emen al que si e de
cla e p ima ia.
Los campos name y ca ego y son s ings.
El campo pic u e gua da la u a de la imagen del ing edien e
omando como di ec o io aíz la ca pe a /s a ic den o del p oyec o
Sp ing Boo .
Pa a pode u iliza la base de da os c eamos un usua io llamado
ecipee s y le o o gamos pe misos de selección, inse ción y bo ado de ilas
pa a pode se u ilizado po el se icio Sp ing Boo .
Pa a la c eación y man enimien o de la abla, así como inse ción y
ac ualización de las ilas u ilizamos una cuen a di e en e que posee más
pe misos que la de ecipee s.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
56
6.1.2 DB Se ices
DB Se ices es una aplicación desa ollada en Sp ing Boo .
P opo ciona a ios se icios web que si en de acceso a la base de da os.
O ece una API de ipo REST pa a se u ilizada po la aplicación mó il con
las llamadas:
• /ge all: de uel e un JSON con odos los ing edien es de la base de
da os
Tipo: GET
Pa áme os: Sin pa áme os de en ada
De uel e: A ay con los siguien es pa áme os:
Campo
Tipo
Desc ipción
Nullable
id
In ege
Id del ing edien e
No
name
S ing
Nomb e del ing edien e
Sí
pic u e
S ing
Ru a de la imagen del ing edien e
Sí
ca ego y
S ing
Ca ego ía del ing edien e
Sí
Ejemplo de espues a:
[
{
"id":143,
"name":" usse po a oes",
"pic u e":null,
"ca ego y":null
},
{
"id":430,
"name":"lemon",
"pic u e":"/lemon.jpeg",
"ca ego y":" ui "
},
...
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
57
• /ge ing edien : ecibe el iden i icado del ing edien e po
pa áme o y de uel e los da os del mismo
Ejemplo: /ge ing edien ?id=430
Tipo: GET
Pa áme os:
Campo
Tipo
Desc ipción
Nullable
id
In ege
Id del ing edien e
Sí
• En caso de que no se apo e dicho id, la espues a se á null
De uel e: JSON con los siguien es pa áme os:
Campo
Tipo
Desc ipción
Nullable
id
In ege
Id del ing edien e
No
name
S ing
Nomb e del ing edien e
Sí
pic u e
S ing
Ru a de la imagen del ing edien e
Sí
ca ego y
S ing
Ca ego ía del ing edien e
Sí
Ejemplo de espues a:
{
"id":430,
"name":"lemon",
"pic u e":"/lemon.jpeg",
"ca ego y":" ui "
}
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
64
Debido a es a di isión en módulos la es uc u a de ca pe as de la
aplicación quedó de la siguien e mane a:
6.2.2.1 Módulo View
Es a capa es la enca gada de maneja la comunicación di ec a con el
usua io.
Con iene dos a chi os Ja aSc ip : ini y on .
El a chi o ini inicializa algunos elemen os de Ma e ialize, como po
ejemplo los paneles desplegables de la is a p incipal al inicia la aplicación.
Sin emba go, el a chi o on es el enca gado de maneja
dinámicamen e el código HTML y ges iona la in e acción con el usua io. Ha
sido diseñado di idiéndolo en es pa es: una pa a las unciones de
inicialización de cada is a, o a pa a la inicialización de los manejado es de
e en os co espondien es a los bo ones de la in e az (lis ene s) y una
úl ima compues a po unciones auxilia es.

Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
65
6.2.2.2 Con olado
El con olado se enca ga de es ablece el lujo de llamadas en e la
capa de p esen ación o el módulo View y el es o de capas. Es a capa es
i al ya que es ablece un con ol y una sepa ación en e la lógica y las is as.
Se decidió ene un con olado pa a es uc u a una lógica que pe mi a la
elabo ación de nue os desa ollos.
Sepa ando de es a mane a las capas se es ablecen unas eglas de
desa ollo que hace la inco po ación de nue o código y uncionalidades
más in ui i as, eniendo cla o en qué módulo se debe desa olla cada pa e
de la nue a uncionalidad. Además, es una ayuda pa a odo aquel que
in en e en ende el código ya desa ollado.
6.2.2.3 Módulo Logic
Es a es la capa donde se ealizan odas las ope aciones con los da os
y se desa olla la lógica de negocio. De momen o sólo con iene el a chi o
algo i hm ya que sólo exis e una uncionalidad, pe o se con empla la
inco po ación de nue os a chi os al módulo según se ayan ampliando las
uncionalidades de la aplicación.
En el a chi o algo i hm es á implemen ado el algo i mo expues o
an e io men e en el capí ulo 5. Es e a chi o iene dependencias con el
a chi o api.js, que implemen a el módulo DAO.
6.2.2.4 Módulo DAO
Es e módulo si e de sopo e pa a la lógica (módulo Logic) en
cuan o al backend se supone.
P opo ciona unciones de acceso a la API de Yummly en el a chi o
Api.js. Conc e amen e dos unciones: ge All, que se llama an o pa a
ob ene HTopIng como pa a la lis a de ece as basándonos ya que es á
p epa ada pa a ealiza una pe ición según los da os que le lleguen, y la
unción ge Recipe que de uel e la ece a del id que le llega.
Po o o lado, el a chi o dao.js es ablece la elación en e el DB
Se ice y la aplicación siendo el pun o de enlace pa a las pe iciones
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
66
elacionadas con nues a base de da os como la ob ención de las o os de
un ing edien e o de los ing edien es pe enecien es a una ca ego ía.
6.3 Diseño de las is as
Además del equisi o ob io de co ec o uncionamien o de la
aplicación, se p es ó a ención al diseño y a la usabilidad de la aplicación.
Pa a ello, p ime o se ealizó una ex ensa in es igación es udiando
aplicaciones mó iles simila es. Obse amos la a qui ec u a de la
in o mación, uncionalidades e inno aciones que se ealiza on en aquel
momen o. Algunos de los esul ados son mos ados a con inuación.
El p oceso de selección de ing edien es po pa e del usua io es u o
inspi ado en la aplicación social de con ac os Tinde [25] (Imagen de la
izquie da), en la cual un usua io puede mos a el in e és o al a de in e és
en o o miemb o de la ed social, al y como se mues a en la siguien e
igu a:
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
67
También nos inspi amos en la aplicación Rece as G a is [26] pa a
de e mina el modo en el que se mues an las ca ego ías pa a selecciona
el ing edien e p incipal.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
68
Con espec o a la isualización de la in o mación de una ece a, nos
basamos en una aplicación (llamada Nes lé Cocina [27]) en pa icula en lo
ela i o a cómo se mues a un esumen de la ece a, su pun uación, la
du ación, y en el hecho de que u iliza a je as desplegables pa a mos a
cada uno de los apa ados de la in o mación de la ece a: in o mación
nu icional po ación, ing edien es, p epa ación, e c.
El siguien e p oceso as la in es igación ue la ase de p o o ipado
gene ando los wi e ames, donde de inimos p ime o el uncionamien o de
la aplicación sin ningún ipo de diseño es ableciendo una na egación
sencilla, uncional pa a así de ec a ácilmen e los e o es que pueda habe .
Co egi los e o es en es a e apa inicial nos aho ó las modi icaciones
pos e io es en el diseño.
Se gene a on los siguien es boce os con la he amien a Balsamiq
[28], u ilizada en la asigna u a “Desa ollo de sis emas in e ac i os” del
g ado en ingenie ía in o má ica.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
69
Los mockups gene ados ue on los que se mues an en la siguien e igu a:
Una ez que los equisi os de usabilidad y la uncionalidad ue on
cubie os, pudimos comenza a conc e a el diseño isual de cada página
indi idual.

Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
70
En él, el colo e de se con ie e en el colo co po a i o de la
aplicación. No quisimos una aplicación demasiado eca gada de dis in as
onalidades y colo es, po lo que los elemen os a des aca en es a son
mos ados únicamen e en colo e de. En e es e ipo de elemen os a
des aca enemos las ece as disponibles (al dispone el usua io de odos
sus ing edien es), con enido impo an e de las ece as, e c.
Se gene a on unos boce os más isuales con la he amien a Ske ch
que pos e io men e se ían modi icaciones po decisión del equipo o
limi aciones con el código de la aplicación.
A con inuación, se mues a la p ime a is a mos ada po la
aplicación, en la que el usua io puede elegi la ca ego ía co espondien e
del ing edien e que quie e u iliza como p incipal.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
71
En la siguien e is a el usua io puede na ega po las dis in as
ca ego ías de ing edien es pa a elegi el ing edien e p incipal de la ece a.
Una ez que el usua io ha seleccionado el ing edien e que quie e
u iliza como p incipal, la siguien e is a se enca ga de mos a una sección
pa a p egun a al usua io po el ing edien e mos ado y debajo o a sección
pa a mos a la lis a de posibles ece as.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
72
Si el usua io pulsa una ece a, se mos a ía un pequeño esumen
donde se puede e una imagen de la ece a, su pun uación, du ación de la
p epa ación y el núme o de ing edien es es an es pa a comple a la.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
73
Po úl imo, cuando el usua io pulsa la ece a deseada, se mues a la
is a de la ece a donde el usua io pod á consul a la in o mación de la
ece a.
Las is as inales de la aplicación (es deci , los documen os HTML y
las hojas de es ilo CSS) e lejan de mane a bas an e p ecisa es e diseño
inicial, sal o pos e io es inco po aciones y cambios debidos a la p opues a
de ideas nue as du an e la ase de implemen ación, limi aciones de
Ma e ialize, y al a de iempo al inclui algunos mecanismos de
in e ac i idad p opues os inicialmen e (po ejemplo, el deslizamien o de
elemen os median e la pan alla ác il del disposi i o mó il).
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
80
9. Apéndice: Apo aciones de los
in eg an es
En es e capí ulo explicamos de o ma de allada la pa icipación de
cada uno de los miemb os del g upo y sus esponsabilidades den o del
p oyec o.
9.1 Ca los Ma ínez Gu ié ez
Desde el p incipio mi a ea p incipal den o del equipo de abajo ha
es ado en ocada hacia el desa ollo del backend de la aplicación.
Du an e la p epa ación del p oyec o los es miemb os hicimos un
abajo bas an e simila , ya que lo hicimos de o ma conjun a pa a pode
pone nos de acue do en las esponsabilidades que oma ía cada uno, los
oles de equipo que adap a íamos, e c.
La p epa ación del p oyec o consis ió en a ias a eas:
• De inición de la me odología de abajo
Debíamos sabe odos en odo momen o en qué es aban abajando los
demás e in en a comp ende lo, de o ma que los es supiésemos cómo
unciona la aplicación en odo su conjun o. Eso ambién implica que haya
a eas ealizadas po más de un in eg an e del g upo a la ez.
• C eación del eposi o io
De es a a ea me enca gué yo en su o alidad. In es igué sob e páginas
pa a aloja p oyec os y Gi hub pe mi ía c ea eposi o ios p i ados con una
cuen a uni e si a ia que ya enía, po lo que c eé el eposi o io e hice
pa icipan es a Ja ie , a Alejand o y a Manuel, nues o di ec o del
p oyec o.
• De inición de obje i os, o ganización del ablón de T ello y
plani icación del p oyec o
Es as a eas ue on ealizadas po los es, ya que debíamos es a odos
de acue do en odas las pa es, sob e odo a la ho a de elegi los obje i os
al se es os poco ealis as.

Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
81
Después de ene cla as las a eas de plani icación, comenzamos las de
in es igación. Yo me enca gué de ealiza una in es igación exhaus i a de
APIs de ece as, ya que al p incipio conocía de una pe o nos dio p oblemas
con los ing edien es. Tu e que in es iga nue as, hace una ecopilación de
las que encon é con sus p os y sus con as y enseña odas las encon adas
al equipo pa a decidi cuál usa .
También ayudé a Alejand o con su in es igación sob e las aplicaciones y
webs simila es e in es igué jun o con Ja ie odo lo que pudimos sob e
Co do a: cómo unciona, quién lo usa, qué podemos hace con ello, hicimos
apps de p ueba y las ins alamos en nues o elé ono.
Una ez u imos cla o el alcance que eníamos con Co do a, nos
pusimos a desa olla el algo i mo. Empezamos unas p ime as e siones
p obando llamadas a la API y sepa ando la in o mación pa a acaba c eando
una p ime a e sión. Comp obamos que e a necesa ia una mayo
op imización pa a pode ejecu a lo en un iempo ela i amen e co o, a ea
que uimos a anzando Ja ie y yo.
Más a de, jun o con Alejand o ambién, conseguimos c ea un
algo i mo inal que solo usase una pe ición a la API en cada i e ación.
Mien as el algo i mo e a p obado y se comp obaba que no u iese
allos me puse a c ea la aplicación pa a el p oyec o con Co do a,
enca gándome de la con igu ación del p oyec o y c eando una is a sencilla
sob e la que se i ía desa ollando en el u u o el es o de la aplicación.
Al mismo iempo que Ja ie y Alejand o a anzaban con la aplicación,
pa alelamen e ins alé en un VPS odo lo necesa io pa a le an a una base
de da os y un se ido web pa a pode usa la.
Pa a ello empecé ins alando la p opia máquina y desca gando los
p og amas p incipales (ja a y MySQL) jun o con sus dependencias. C eé un
usua io llamado ecipee s pa a pode accede y que no u iese pe misos de
sudo.
En la base de da os c eé las ablas y con ibuí a la inse ción de
ing edien es ayudado en g an pa e po Alejand o. También c eé o o
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
82
usua io ecipee s con los pe misos básicos pa a mayo segu idad, ya que
se ía el usua io u ilizado po el se ido web.
Desa ollé una aplicación web con Sp ing Boo pa a se i de API y así la
aplicación pudiese conec a se con la base de da os pa a consegui la
in o mación ex a que Yummly no podía p opo ciona nos.
Al inaliza , ealizamos a eas de es ing pa a comp oba que odo
uncionaba co ec amen e y descub i allos. También animamos a un
núme o educido de conocidos pa a que la p obasen y nos comen asen
e o es y posibles mejo as.
9.2 Alejand o Mon e o Roldán
Mi pues o den o del equipo de abajo ha es ado en ocado hacia el
desa ollo del on end de la aplicación, en ocado a la expe iencia de
usua io.
Al ene la opo unidad de abaja con compañe os de la ca e a,
donde conocemos el abajo de cada uno y sus habilidades, nues o
obje i o se con i ió en i i la mejo expe iencia c eando una aplicación
ag adable y ap ende de su desa ollo.
Hemos abajado en común du an e el desa ollo, in en ando que
odos los miemb os en endié amos la aplicación po comple o. Aunque
hubo a eas que ue on asignadas a cada miemb o del equipo, odo el
equipo es aba al co ien e del es ado de la aplicación.
El p oceso de inicio ue un abajo en g upo, se ealiza on a eas de
in es igación, ges ión y diseño que nos acili ó el abajo al ene odas las
ideas pues as en común.
Con el a ance del p oyec o se de inie on es a eas p incipales:
• Desa ollo del backend, capa de base de da os, in eg ación de la API
y DB Se ices. Es as a eas ue on asignadas a Ca los.
• Desa ollo de la lógica de negocio e in eg aciones con el es o de
módulos, que ue on asignada a Ja ie .
• Desa ollo del diseño y on end y odo lo elacionado con la
expe iencia de usua io, desde la in es igación, diseño e
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
83
implemen ación de las in e aces has a ayuda con la in eg ación con
el módulo View. Es as a eas me ue on asignadas a mí.
Nues os p ime os pasos ue on de ini cómo íbamos a abaja y la
me odología de abajo a segui . Con T ello conseguimos plani ica nues o
abajo, donde subíamos las a eas nue as con asignación a miemb os del
equipo. G acias a es a he amien a odos sabíamos en qué ase se
encon aba cada a ea (po hace , desa ollo o e minada) y qué a eas le
co espondían a cada uno.
Tu imos muchas ideas que inclui en la aplicación, pe o nos dimos
cuen a que debíamos de cen a nos en ene la base de la aplicación, con
una uncionalidad p incipal. Pa a ello de inimos el alcance del p oyec o,
in en ando c ea el p oduc o lo más sencillo posible y pos e io men e
mejo a lo con nues as ideas.
Con los obje i os bien de inidos, ealizamos una plani icación pa a llega
a los iempos de en ega aco dados con el u o y consegui el mejo abajo
posible en el meno iempo posible pa a ene la opo unidad de inco po a
nue as uncionalidades.
Una ez de inido el p oyec o comenzó la ase de in es igación. En es a
ase me enca gué de la in es igación de aplicaciones de ece as ya en el
me cado. Pa a cada una de ellas lle é a cabo un análisis de diseño, de su
usabilidad, obse aba las inno aciones que in oducían y si e a adecuada
pa a nues a aplicación, de iniendo odas las posibilidades que pe mi ía la
aplicación y, sob e odo, los allos que encon aba en la misma.
Po o o lado, decidí empeza a in es iga sob e Ske ch, la he amien a
p incipal, u ilizada en mi equipo de abajo en el que me encuen o de
p ác icas, pa a el desa ollo de boce os. Es oy ealizando p ác icas de
emp esa pa a una emp esa mul inacional y pe enezco al depa amen o de
Expe iencia de Usua io.
T as in es iga y amilia iza me con Ske ch acabé po en ende su
uncionamien o y ob ene los boce os u ilizado pa a el desa ollo de las
is as de la aplicación.
Du an e es e p oceso ealicé un análisis (benchma k) compa ando los
p oduc os simila es que exis en en el me cado, jun o con el c i e io de
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
84
p o esionales, a pa i de lo cual ob u e odo lo necesa io pa a empeza a
c ea los boce os. Una ez e minados, ue on alo ados po mi equipo de
abajo, donde sugi ie on mejo as y de ec a on allos que solucioné
pos e io men e.
La siguien e a ea que decidimos como p io i a ia e a el diseño del
algo i mo p incipal. Los p ime os pasos ue on lle ados a cabo po el equipo
en conjun o. Más adelan e u e que deja de pa icipa empo almen e en
es a a ea pa a enca ga me del diseño de las in e aces, de modo que los
dos compañe os es an es siguie on diseñando el algo i mo p incipal, has a
la úl ima e sión del mismo, en el que pa icipé con el in de dispone de
una e sión inal álida.
Po mo i os de plani icación y echas de en ega u e que empeza el
p oceso de implemen ación de las is as de la aplicación. Pa a ello comencé
con una p ime a ase de diseño en la que es udiaba las posibilidades de
implemen ación con los boce os que eníamos de la aplicación. Después
siguió una segunda ase de implemen ación, donde gene aba el código
necesa io pa a la implemen ación de las is as.
Du an e la ase de implemen ación u e que in e eni en la pa e de
on end de la aplicación pa a gene a uncionalidades que necesi aba en
aquel momen o. Mi compañe o Ja ie ue la pe sona con mayo
esponsabilidad en es a pa e, aunque yo le se í de apoyo y desa olle
a ias unciones elacionadas con el con ol dinámico de los da os de las
is as.
Más adelan e, mi compañe o Ca los y yo nos enca gamos de gene a
con enido pa a la base de da os. Median e el uso de la línea de comandos
de la base de da os me enca gué de ca ego iza los ing edien es que ienen
la aplicación, añadi o os y c ea ing edien es que al aban en la base de
da os.
Po úl imo, cuando ya eníamos nues a aplicación lis a, ealicé una ase
de es eo pa a e isa uncionalidades, na egación, con ol de e o es,
mejo a de de alles, e c. Pa a ello con é con la ayuda de amigos y amilia es
que ue on some idos a unas p uebas de usua ios con la aplicación, donde
mos aba los esul ados ob enidos a mis compañe os y se ealizaba una
oma de decisiones pa a posibles cambios.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
85
9.3 Ja ie Vicen e Cano
Desde el inicio del p oyec o nues a me odología siemp e ue
in en a ealiza los a ances en común, de mane a que odo el equipo
en endiese la aplicación po comple o. Cie amen e, hubo epa os de
a eas que se ealiza on de mane a casi indi idual, pe o odo el equipo
es aba al co ien e del es ado de la aplicación y en endía los úl imos
a ances.
Sob e odo al inicio del p oyec o, se abajó de mane a más g upal,
ya que e a impo an e pone en común las a eas p opias de ges ión,
in es igación y diseño.
Según se a anzó en el p oyec o las a eas se ue on epa iendo,
di idiéndose de mane a gené ica en es a eas p incipales. Po un lado, el
backend, que incluye la capa de base de da os, in eg ación de la API y DB
Se ices, se le adjudicó a Ca los. Alejand o se enca gó de odo lo
elacionado con la expe iencia de usua io, desde la in es igación, diseño e
implemen ación de las in e aces has a ayuda con la in eg ación con el
módulo View. Yo, po o o lado, me enca gué de la lógica de negocio y las
in eg aciones con el es o de los módulos.
Al p incipio del p oyec o decidimos que e a necesa io emplea cie o
iempo en la p epa ación del p oyec o.
P ime o de inimos cómo íbamos a abaja , es deci , la me odología
de abajo. Se decidió u iliza una he amien a de ges ión de a eas llamada
T ello en la que cada semana subíamos las a eas nue as y se asignaban a
miemb os del equipo con echas lími e. También di idimos las a eas
añadiéndolas e ique as dis in as según uese de ges ión, desa ollo,
in es igación, e c. G acias a es a he amien a odos sabíamos en qué ase
se encon aba cada a ea (po hace , en desa ollo o e minada) y qué
a eas le co espondían a cada uno.
A con inuación de inimos el alcance del p oyec o. Es o ue i al ya
que eníamos muchas ideas que que íamos inclui en la aplicación, odas
ellas expues as en el abajo u u o. Pe o al inal decidimos que lo mejo e a
desa olla una buena base y desa olla sólo la uncionalidad p incipal,

Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
86
debido a odo el p oceso de in es igación y diseño que eníamos po
delan e.
Una ez de inidos los obje i os, quedaba plani ica la ealización de
los mismos. Se in en ó ealiza una plani icación que u iese en cuen a los
dis in os iesgos de cada ase po si su gían p oblemas. En caso de inaliza
odo el p oyec o an es de iempo se end ía en cuen a la posibilidad de
inclui una nue a uncionalidad. No obs an e, decidimos no usa ninguna
he amien a de plani icación de p oyec os, al pode inclui echas lími e en
las a eas de T ello.
Una ez de inida la plani icación del p oyec o, comenzó la ase de
in es igación. En es a ase se me enca gó la in es igación de aplicaciones
de ece as que se encon asen ya en el me cado. Pa a cada una de ellas
lle é a cabo un análisis uncional, de iniendo odas las posibilidades que
p opo cionaba la aplicación y, sob e odo, los allos que encon aba. El
obje i o de es a in es igación e a ob ene una lis a con odo aquello que
que íamos en nues a aplicación, ya uese po que nos gus aba de o a o
po que lo echábamos en al a.
Po o o lado, Ca los y yo decidimos empeza a in es iga sob e
có do a, ya que aunque sabíamos que e a capaz de ans o ma una
aplicación web en una and oid o Ios, debíamos ap ende a u iliza la. Pa a
ello an es me ins alé el And oid S udio con el in de u iliza lo pa a ejecu a
la aplicación And oid esul an e de Co do a. T as in es iga y p oba acabé
po en ende su uncionamien o y ob ene una aplicación sencilla
desa ollada en h ml y ja asc ip ans o mada en una aplicación And oid.
La siguien e a ea que decidimos como p io i a ia e a el diseño del
algo i mo p incipal. Los p ime os pasos los uimos lle ando en conjun o, y
yo me ui enca gando de ansc ibi , no desa olla , las e siones iniciales
del algo i mo.
Según uimos a anzando con el algo i mo nos dimos cuen a que,
debido a las limi aciones de la API, la impo ancia de ealiza un algo i mo
e icien e que se adap ase a dichas limi aciones. Es po eso que la
elabo ación del diseño de ini i o del algo i mo nos lle ó más iempo del
espe ado.
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
87
Una ez diseñado la e sión inal del algo i mo, y es ando ansc i a.
Desa olle un diag ama pa a pode isualiza las a iables necesa ias
du an e la ejecución y pode e el algo i mo di idido en unciones simples
que se pudiesen empeza a desa olla .
Todo el equipo comenzó en desa ollo del algo i mo con las
unciones indi iduales que se ían llamadas desde el main del algo i mo.
Más a de, as ene una e sión educida y simple del algo i mo mis
compañe os se cen a on en sus a eas y a mi se me enca gó e mina de
desa olla lo po comple o.
Una ez desa ollado, c eamos el p oyec o de ini i o de Co do a y
u ilizamos Requi eJS pa a inclui odos los módulos del p oyec o: View,
Con olado , Logic, DAO. Yo me enca gué de la in eg ación de los
dis in os módulos en el p oyec o y las conexiones en e los mismos como
ya es á explicado en el capí ulo 6.
El desa ollo del con olado ue ín eg o po mi pa e, y el esquema
gene al del on igual, aunque Alejand o in e ino a la ho a de in eg a la
pa e de con ol dinámica del h ml. Todo el módulo DAO ue desa ollado
po Ca los y la in eg ación en e el módulo Logic y el DAO y el con olado
y el DAO quedó a mi ca go.
Una ez desa ollada la aplicación comple a y es ando en pleno
uncionamien o comenzó un pe iodo de p uebas o es ing. Du an e es e
pe iodo la idea p incipal e a in en a consegui que la aplicación allase de
cualquie mane a posible. Aunque no su gie on e o es g a es, si
encon amos cie os allos de isualización o de duplicidad en la base de
da os, po ejemplo. Además, du an e es a ase les dejamos p oba la
aplicación a di e en es usua ios ajenos al desa ollo de la misma pa a e si
exis ían e o es que no consiguiésemos descub i .
Po úl imo, el desa ollo de la memo ia ue di idido en pa es según
lo desa ollado po cada uno, de mane a que cada uno esc ibiese sob e
aquello que ealmen e con olaba mejo .
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
88
Re e encias:
[1]
«Edamam.com» [En línea]. A ailable: h ps://www.edamam.com/. [Úl imo acceso: 2018].
[2]
Yummly, «Yummly.com» [En línea]. A ailable: h ps://www.yummly.com/. [Úl imo acceso: 2018].
[3]
Food2Fo k, «Food2Fo k» [En línea]. A ailable: h ps:// ood2 o k.com. [Úl imo acceso: 2018].
[4]
Big O en, «Bigo en.com» [En línea]. A ailable: h ps://www.bigo en.com/. [Úl imo acceso: 2018].
[5]
Apache Co do a, «Co do a.apache.o g» [En línea]. A ailable: h ps://co do a.apache.o g/. [Úl imo acceso:
2018].
[6]
«Co do a.apache.o g» [En línea]. A ailable:
h ps://co do a.apache.o g/docs/en/8.x/guide/o e iew/index.h ml. [Úl imo acceso: 2018].
[7]
«W3.o g» [En línea]. A ailable: h ps://www.w3.o g/TR/h ml5/. [Úl imo acceso: 2018].
[8]
«W3.o g» [En línea]. A ailable: h ps://www.w3.o g/S yle/CSS/. [Úl imo acceso: 2018].
[9]
«Ma e ializecss.com» [En línea]. A ailable: h ps://ma e ializecss.com. [Úl imo acceso: 2018].
[10]
«Ja aSc ip .com» [En línea]. A ailable: h ps://www.ja asc ip .com/. [Úl imo acceso: 2018].
[11]
«Node.js» 2018. [En línea]. A ailable: h ps://nodejs.o g.
[12]
«Requi ejs.o g» [En línea]. A ailable: h p:// equi ejs.o g/. [Úl imo acceso: 2018].
[13]
«P ojec s.sp ing.io» [En línea]. A ailable: h ps://p ojec s.sp ing.io/sp ing-boo /. [Úl imo acceso: 2018].
[14]
«Mysql.com» [En línea]. A ailable: h ps://www.mysql.com/. [Úl imo acceso: 2018].
[15]
«Gi Hub» [En línea]. A ailable: h ps://gi hub.com/ ea u es. [Úl imo acceso: 2018].
[16]
«Google.com» [En línea]. A ailable: h ps://www.google.com/in l/es_ALL/d i e/. [Úl imo acceso: 2018].
[17]
«T ello.com» [En línea]. A ailable: h ps:// ello.com/. [Úl imo acceso: 2018].
[18]
«Sublime ex .com» [En línea]. A ailable: h ps://www.sublime ex .com/. [Úl imo acceso: 2018].
[19]
«A om» [En línea]. A ailable: h ps://a om.io/. [Úl imo acceso: 2018].
[20]
«Pu y.o g» [En línea]. A ailable: h ps://www.pu y.o g/. [Úl imo acceso: 2018].
[21]
«Ske ch» [En línea]. A ailable: h ps://www.ske chapp.com/. [Úl imo acceso: 2018].
[22]
«O h.es» [En línea]. A ailable: h ps://www.o h.es/ ps/. [Úl imo acceso: 2018].
[23]
«Docs.sp ing.io» [En línea]. A ailable: h ps://docs.sp ing.io/sp ing- amewo k/docs/cu en /ja adoc-
api/o g/sp ing amewo k/web/se le /m c/me hod/anno a ion/Abs ac JsonpResponseBodyAd ice.h ml.
[Úl imo acceso: 2018].
Desa ollo de aplicación mul ipla a o ma de búsqueda y ges ión de ece as
89
[24]
«Docs.sp ing.io» [En línea]. A ailable: h ps://docs.sp ing.io/sp ing-
da a/commons/docs/cu en /api/o g/sp ing amewo k/da a/ eposi o y/Reposi o y.h ml. [Úl imo acceso:
2018].
[25]
«Tinde » [En línea]. A ailable: h ps:// inde .com/. [Úl imo acceso: 2018].
[26]
«app. ece asg a is.ne » [En línea]. A ailable: h ps://app. ece asg a is.ne /. [Úl imo acceso: 2018].
[27]
«Nes lé Cocina» [En línea]. A ailable: h ps://www.nes lecocina.es/app-nes le-cocina. [Úl imo acceso: 2018].
[28]
«Balsamiq.com» [En línea]. A ailable: h ps://balsamiq.com. [Úl imo acceso: 2018].