Alimenticia, una aplicación web para organizar tus recetas y compras en un solo lugar

ALIMENTICIA, UNA APLICACIÓN WEB PARA ORGANIZAR TUS RECETAS Y COMPRAS EN UN SOLO LUGAR ALIMENTICIA, A WEB APPLICATION TO ORGANIZE YOUR RECIPES AND PURCHASES IN ONE PLACE. TRABAJO FIN DE GRADO CURSO 2023-2024 AUTORES DAVID DOMÍNGUEZ GUTIÉRREZ JESÚS VÉLEZ AYUSO DIRECTOR RAMÓN GONZALEZ DEL CAMPO RODRIGUEZ BARBERO GRADO EN INGENIERÍA DE SOFTWARE FACULTAD DE INFORMÁTICA UNIVERSIDAD COMPLUTENSE DE MADRID ALIMENTICIA, UNA APLICACIÓN WEB PARA ORGANIZAR TUS RECETAS Y COMPRAS EN UN SOLO LUGAR ALIMENTICIA, A WEB APPLICATION TO ORGANIZE YOUR RECIPES AND PURCHASES IN ONE PLACE. TRABAJO DE FIN DE GRADO EN INGENIERÍA INFORMÁTICA DEL SOFTWARE AUTORES DAVID DOMÍNGUEZ GUTIÉRREZ JESÚS VÉLEZ AYUSO DIRECTOR RAMÓN GONZALEZ DEL CAMPO RODRIGUEZ BARBERO CONVOCATORIA: JUNIO 2024 GRADO EN INGENIERÍA DE SOFTWARE FACULTAD DE INFORMÁTICA UNIVERSIDAD COMPLUTENSE DE MADRID 27 DE MAYO DE 2024 2 DEDICATORIA Da id: P incipalmen e a mis pad es con el g an apoyo y paciencia que han enido. A mi no ia Sa a, que me apoyada en odo momen o y sob e odo me ha ayudado a acla a la cabeza en momen os de duda. Jesús: A las 3 muje es que me han hecho, me hacen y me ha án eliz en la ida. Mi mad e po odo el su imien o acumulado es os años de ai enes en mis es udios, mi pa eja po odas esas noches en ela y mi u u a hija que es a á con noso os en sep iemb e. 3 AGRADECIMIENTOS En pa icula ag adecemos los dos a Ramón González Del Campo, nues o u o , po su amabilidad y o al disponibilidad. Da id: A mis pad es que siemp e me han apoyado en odo y siemp e me han ayudado. A mi no ia Sa a, que siemp e me ha animado en odo lo que me he p opues o, el apoyo que ecibo de ella. Jesús: A mi pa eja, Raquel, po odo el apoyo y ánimo. Sin i no hab ía sido posible. A mis pad es po su paciencia y no desis i en los ánimos. A mi je e, Juanen, po su o al apoyo y con ianza an o labo almen e como pe sonalmen e, animándome a e mina los es udios de la mejo mane a posible. 4 RESUMEN Alimen icia, una aplicación web pa a o ganiza us ece as y comp as en un solo luga . En la ac ualidad la gen e no iene iempo pa a pode desa olla sus ac i idades dia ias adecuadamen e, ya sea po el abajo o sus necesidades pe sonales, y en un con ex o de di icul ad económica pa a muchas pe sonas hemos ideado con es e p oyec o p opone una posible solución a es os p oblemas. Nues o abajo de in de g ado p opone una he amien a pa a compa a p ecios de supe me cados, hace lis as de la comp a pa a op imiza el p esupues o, consul a la in o mación nu icional de di e en es alimen os y pod á calcula las calo ías que debe á consumi , sabe qué p oduc os es án de empo ada e incluso ene un ece a io online y compa i ece as con la comunidad. Una pa e undamen al de es e p oyec o es el uso de web sc aping, donde a pa i de es a écnica ex aemos de o ma au oma izada da os de páginas web. En nues o caso, se ha u ilizado Ja aSc ip pa a la ex acción de los p ecios y di e en es da os de los supe me cados. En la aplicación enemos 2 oles di e en es, el usua io au en icado y el usua io anónimo. El usua io au en icado, además de con a con su p opio pe il pod á gua da lis as de ece as a o i as, c ea ece as y lis as de la comp a i uales con el p ecio de los alimen os. En de ini i a, el usua io egis ado end á más p i ilegios que un usua io anónimo. Dicho es o, la uncionalidad p incipal de nues a aplicación que es la consul a de p ecios y compa a i a de supe me cados es a á disponible pa a cualquie usua io. Palab as cla e Aplicación web, Web sc aping, MySQL, Api, Compa ado , Rece a io, Alimen ación, die é ica, aho o. 5 ABSTRACT Alimen icia, a web applica ion o o ganize you ecipes and pu chases in one place. A p esen , people don’ ha e ime o ca y ou hei daily ac i i ies p ope ly, whe he due o wo k o pe sonal needs. In a con ex o economic di icul y o many indi iduals, we ha e de ised his p ojec o p opose a po en ial solu ion o hese p oblems. Ou inal deg ee p ojec p oposes a ool o compa ing supe ma ke p ices, c ea ing shopping lis s o op imize budge s, checking he nu i ional in o ma ion o di e en oods, and calcula ing he calo ies one should consume. I also allows use s o know which p oduc s a e in season and p o ides an online ecipe book o sha ing ecipes wi h he communi y. A undamen al pa o his p ojec in ol es web sc aping, whe e we au oma ically ex ac da a om web pages using his echnique. In ou case, Ja aSc ip has been used o ex ac ing p ices and o he supe ma ke - ela ed da a. Wi hin he applica ion, we ha e wo di e en oles: au hen ica ed use s and anonymous use s. Au hen ica ed use s, in addi ion o ha ing hei own p o ile, can sa e a o i e ecipe lis s, c ea e ecipes, and i ual shopping lis s wi h ood p ices. Ul ima ely, egis e ed use s will ha e mo e p i ileges han anonymous use s. Tha said, he main unc ionali y o ou applica ion—p ice compa ison and supe ma ke compa ison—will be a ailable o any use . Keywo ds Web applica ion, Web sc aping, MySQL, APIs, Compa a o , Recipe book, Nu i ion, Die e ics, Sa ings. 6 ÍNDICE DE CONTENIDOS Con enido In oducción ...................................................................................................................... 1 Mo i ación ............................................................................................................ 1 Obje i os ............................................................................................................... 2 Plan de abajo ..................................................................................................... 3 Es ado de la cues ión ....................................................................................................... 5 Aplicaciones Simila es .......................................................................................... 5 Soysupe ................................................................................................................ 5 Aho o me cado ................................................................................................... 6 Supe más ba a o ................................................................................................. 6 Nu icien a ............................................................................................................ 7 OCU ....................................................................................................................... 8 Soy de empo ada ............................................................................................... 9 Valo de nues a aplicación ................................................................................ 9 Fundamen os eó icos y ecnológicos ..........................................................................11 Tecnologías u ilizadas .........................................................................................11 Backend ...............................................................................................................11 F on end ...............................................................................................................13 7 Tecnologías Gene ales .......................................................................................15 Fundamen os de desa ollo web u ilizados ......................................................18 Sc aping ...............................................................................................................23 Selección de supe me cados: ...........................................................................23 Funcionalidad de la aplicación .....................................................................................25 Ac o es .................................................................................................................25 Ges ión de usua ios .............................................................................................25 Regis o .................................................................................................................26 Inicio de sesión ....................................................................................................27 Pe il de usua io ...................................................................................................28 Elimina pe il ........................................................................................................29 Ce a sesión ........................................................................................................30 Ges ión del compa ado ....................................................................................31 Selección de supe me cado .............................................................................32 Buscado ..............................................................................................................34 Ca i o ...................................................................................................................36 Ca i os gua dados .............................................................................................37 Compa ado ........................................................................................................38 Ges ión de ece as ..............................................................................................40 Lis ados Rece as ..................................................................................................41 De alle de la ece a ............................................................................................44 Adminis a ece a ...............................................................................................45 In e acción ece as ( a o i os y pun uación + comen a io) ...........................50 Ges ión de die é ica ...........................................................................................52 8 Ges ión de alimen os de empo ada ................................................................56 A qui ec u a de la aplicación Web ...............................................................................60 Desa ollo local y despliegue .............................................................................60 Es uc u a del on end .......................................................................................62 Di ec o ios ............................................................................................................62 Es uc u a del backend ......................................................................................65 Compa ación de p oduc os ..............................................................................65 Au en icación po Token ....................................................................................66 Di ec o ios ............................................................................................................68 Es uc u a del Sc aping. ......................................................................................69 Es uc u a de la base de da os de la aplicación web ................................................73 Base de da os: Alimen icia .................................................................................73 Alimen o: ..............................................................................................................74 Almacenaje: ........................................................................................................75 Bene icio: .............................................................................................................75 Seleccion: ............................................................................................................75 Tempo ada: .........................................................................................................76 Rece as ................................................................................................................76 Ca ego ia_ ece a: ..............................................................................................77 Rece as_ a o i as: ...............................................................................................77 Usua ios: ................................................................................................................78 Valo acion: ...................................................................................................78 Comp a: .......................................................................................................79 P oduc o: ......................................................................................................79 15 1 In oducción Hoy po hoy la si uación económica en la que i imos ha gene ado la necesidad en muchas amilias de aho a en sus gas os dia ios. El hecho de muchas eces no ene iempo pa a o ganiza se lle a muchas eces a ese consumo excesi o y gas o innecesa io. Muchas amilias han enido que ajus a sus p esupues os, busca soluciones que pe mi an educi el gas o y op imiza las comp as de mane a más e icien e. De es a mane a su ge la idea de desa olla una aplicación web que acili e a las pe sonas es as a eas. Ilus ación 1-1 Logo Alimen icia En es e documen o desa olla emos como ha sido el es udio p e io y que alo apo a nues a aplicación (Capí ulo 2), cuáles han sido las he amien as y ecnologías u ilizadas (Capi ulo 3) pa a el desa ollo del p oyec o, así como la uncionalidad y a qui ec u a de los componen es de la aplicación (Capí ulo 4, 5 y 6). Po úl imo, elabo ado es unas conclusiones, así como unas líneas a segui en el u u o (Capí ulo 7) Mo i ación ¿Nos hemos pa ado alguna ez en consul a dis in os p ecios de un mismo p oduc o en a ios supe me cados? Habi ualmen e nos ocu e que es amos comp ando y pensamos si ese p oduc o se ía más ba a o en o o supe me cado o si end ía alguna o e a. Alimen icia se á u g an aliado a la ho a de ealiza u comp a o de as ea dis in os p oduc os en busca de las mejo es o e as. 2 También cuando ealizamos alguna ece a o la emos en alguna pla a o ma, e is a o ele isión, nos p egun amos cuán o nos cos a ía esa ece a. Alimen icia ambién e o ece la posibilidad de añadi los ing edien es que iene una ece a y en base a ello calcula el p ecio que e cos a ía. Además, muchas eces que acudimos al supe me cado no sabemos qué p oduc os son de empo ada po lo que a eces comp amos alimen os que, aunque es án en el supe me cado es án a un p ecio más al o que o os meses al pun o. Alimen icia eúne u as y e du as donde se mues a en qué mes es á de empo ada o en qué meses ha salido o es á en ando de empo ada. Obje i os El obje i o p incipal de es e p oyec o es el desa ollo de una aplicación web que si a de ayuda pa a los usua ios de una mane a ácil y cómoda en la ob ención de los p ecios de p oduc os de supe me cados sin ene que accede a cada página co espondien e y así pode ealiza compa a i as de p oduc os y decidi en cuál hace la comp a. La aplicación ambién p opo ciona la c eación de un ece a io p opio o compa ido con la comunidad y pode ob ene el p ecio o al de la ece a. O o de los obje i os plan eados en es e p oyec o es la ob ención de en qué meses es án de empo ada los p incipales alimen os que consumimos. De es a mane a pa a lle a a cabo el p oyec o se han c eado una se ie de obje i os a segui : ● Análisis de o as aplicaciones que gua den elación con la nues a. ● Es udio y aplicación de écnicas de web sc aping pa a la ex acción de mane a au omá ica de da os y p ecios de p oduc os de páginas de supe me cados. ● U ilización de da os y APIs públicas pa a en iquece la uncionalidad de la aplicación en la medida de lo posible. 3 ● Desa ollo e implemen aciones de uncionalidades, como el egis o de usua ios algo i mos de compa ación, ges ión de base de da os pa a un buen uncionamien o de la pla a o ma, au en icación po oken. ● C eación de una documen ación donde se explica el p oceso de c eación y desa olla la aplicación. Plan de abajo Pa a log a los obje i os del p oyec o nos hemos o ganizado en una se ie de ases adap adas pa a in en a alcanza los obje i os p opues os en cada una de ellas. En el desa ollo web, y en o os ipos de p oyec o, se suelen de ini unas e apas pa a el desa ollo global del p oyec o y es el plan de abajo que hemos ealizado. [1] ● In es igación y análisis: ○ Se ealiza una in es igación y análisis de las p incipales ías pa a el desa ollo de la aplicación. ○ Se lle a a cabo un es udio de los se icios o he amien as que necesi a emos pa a el desa ollo y la in eg ación con las ecnologías a usa ○ Búsqueda de uen es de da os públicos. (Base de da os de alimen os, nu ición, e c., logos, bancos de imágenes, iconos) ○ In es igación de web sc aping ○ Es udio de o as aplicaciones simila es ● Diseño y es uc u a ○ Elabo ación de las is as de la aplicación ○ Elabo ación de los modelos de la aplicación ● Desa ollo e implemen ación: ○ Realización del Web sc aping e in eg ación de los da os con nues a base de da os ○ Desa ollo de los casos de uso p opues os. ● P uebas, documen ación y en ega: ○ Elabo ación de la memo ia con odos los aspec os del p oceso de desa ollo 5 Es ado de la cues ión En es a sección, se mos a á un análisis ac ual de la si uación, ealizando una compa ación con las aplicaciones simila es exis en es, apo ando soluciones disponibles y sus ca ac e ís icas. Concluimos con el alo añadido de nues a aplicación sob e el es o. Aplicaciones Simila es Soysupe Soy Supe , es una aplicación que pe mi e a los usua ios compa a los p ecios de los alimen os en supe me cados. También puedes ealiza la lis a de la comp a, con la opción de en ia la lis a a la web del supe me cado, pa a pode ealiza la comp a online. Una aplicación muy comple a que nos si ió de inspi ación pa a la pa e de compa ado de nues o p oyec o. ● Pun os ue es: Amplia gama de supe me cados. En ia la ces a al supe me cado pa a ealiza la comp a online. ● Pun os débiles: A eces las compa aciones de p oduc os no son exac as. Ilus ación 2-1 Pan alla Soy Supe 6 Aho o me cado Aho a me cado, es una aplicación simila a soySupe . Pe mi e busca p oduc os de supe me cado y e mues a una lis a con el p ecio y los supe me cados en los que es á disponible el p oduc o. ● Pun os ue es: Amplia gama de p oduc os. ● Pun os débiles: Las búsquedas son un poco inexac as. Necesi as egis a e pa a la mayo ía de las uncionalidades y hace la página poco in ui i a. Ilus ación 2-2 Pan alla Aho o Me cado Supe más ba a o Supe más ba a o es un buscado de p oduc os de supe me cado. Puedes selecciona los supe me cados y e mues a un lis ado de los p oduc os, mos ando el p ecio del p oduc o, pe o no puedes hace nada más. ● Pun os ue es: Amplia gama de supe me cados. ● Pun os débiles: In o mación simple del p oduc o sin nada más que pode ealiza . 7 Ilus ación 2-3 Pan alla Supe Más Ba a o Nu icien a Nu icien a, es un po al de nu ición y ece as. Es a página o ece a los usua ios ece as, in o mación nu icional de los alimen os y cu sos pa a comenza con una nu ición más saludable bas an e comple a. ● Pun os ue es: In o mación nu icional comple ísima de las ece as. La web es á ealizada y man enida po un equipo p o esional que abaja en el ámbi o de la nu ición lo que hace que la web sea muy comple a nu icionalmen e hablando. Con iene un apa ado de no icias sob e nu ición que ambién le apo a mucho alo . ● Pun os débiles: Hay una sob eca ga de in o mación que no la hace amigable. 8 Ilus ación 2-4 Pan alla Nu icien a OCU La o ganización de consumido es y usua ios p opo ciona un calenda io de u as y e du as de empo ada en España. Puedes desca ga el calenda io en pd o isi a las páginas del calenda io. ● Pun os ue es: Dispone de un buscado de alimen os. ● Pun os débiles: No dispone de mucha in o mación del alimen o. Ilus ación 2-5 Pan alla Ocu 9 Soy de empo ada Soy de empo ada, es un p oyec o web que se inició como un es udio de los alimen os en España, con análisis de da os an o de los minis e ios de ag icul u a como de las asociaciones del país pa a cla i ica y euni los calenda ios de los alimen os de empo ada del país. ● Pun os ue es: Dispone de un ue e análisis de los meses en los que un alimen o es de empo ada. ● Pun os débiles: La in o mación del p oduc o es pob e nu icionalmen e hablando. Mues a ca ac e ís icas del cul i o. Ilus ación 2-6 Pan alla Soy De Tempo ada Valo de nues a aplicación Hemos que ido euni muchas uncionalidades que ya exis en de una mane a pa ecida en una sola web, eniendo un acceso único. De odo lo desc i o en el 16 MySQL wo kbench Es una he amien a pa a el diseño de las bases de da os, pa a el sis ema de base de da os MYSQL. Hemos u ilizado es a he amien a pa a el desa ollo local como clien e MySQL. [10] Ilus ación 3-8 Logo MYSql Wo kbench Gi Hub Es una pla a o ma pa a el desa ollo colabo a i o, que u iliza un sis ema de e siones. En es a pla a o ma hemos c eado es eposi o ios públicos alimen icia- backend, alimen icia- on end y alimen icia-sc aping pa a pode almacena y ges iona el código de la aplicación, lo que nos ha acili ado a la ho a de hace un seguimien o de los cambios ealizados. [11] Hemos decidido sepa a los poque en el análisis p e io del despliegue de la aplicación e a ecomendable ene los sepa ados. 17 Ilus ación 3-9 Logo Gi hub Visual S udio Code Es un en o no de desa ollo de código abie o de Mic oso . Es li iano, ágil y se adap a muy bien a es e ipo de desa ollos web o eciendo muchas lib e ías de ayuda. [12] Ilus ación 3-10 Logo Visual S udio Code Api de Google Maps y Places Es un se icio que p opo ciona Google pa a ob ene ubicaciones o localizaciones. La hemos u ilizado pa a ob ene la lis a de supe me cados a a és del código pos al. En un p ime luga ob enemos un a io del código pos al que nos lo p opo ciona la api de Maps y con las coo denadas ob eníamos el lis ado de supe me cados a a és de Places. [13] 18 Ilus ación 3-11 Logo Google Maps APIs Open ood Fac s Es una aplicación donde puedes consul a la in o mación nu icional de cualquie alimen o o p oduc o, iene una api pública que hemos u ilizado pa a nues a sección de nu ición. [14] Ilus ación 3-12 Logo Open Food Fac s Fundamen os de desa ollo web u ilizados Den o del desa ollo web exis en di e en es undamen os que hacen que una aplicación o página web ma que la di e encia y que hemos seguido en la mayo medida: • Uso de imágenes e iconos pa a comunica . Hemos usado muchas imágenes de bancos de imágenes g a ui os e iconos pa a simpli ica ex os y que el usua io a golpe de is a sepa que es lo que es á haciendo o iendo como mos amos en las siguien es ilus aciones. 19 Ilus ación 3-13 Iconos de las ca ac e ís icas de un alimen o de empo ada Ilus ación 3-14 Iconos que ep esen an ca ac e ís icas de una ece a • Colo como elemen o de diseño. Cuando c eamos el logo ipo pa a la aplicación, elegimos el e de po se un colo ep esen a i o de las e du as y la alimen ación sana. Con él hemos c eado una pale a de colo es p ima ia pa a oda la aplicación. Ilus ación 3-15 Pale a de colo es p ima ios Alimen icia Así los elemen os p incipales de la aplicación como los bo ones, inpu s, bo des, enlaces… lle an el colo “co po a i o”. 20 Ilus ación 3-16 Colo p ima io” co po a i o” • Diseño esponsi e: Mobile i s design Uno de los p incipales p incipios en el desa ollo web es el diseño esponsi e. Un mayo po cen aje de isualización de webs se hace ía mó il po lo que hemos que ido desa olla la aplicación bajo es e p incipio. Mobile i s design consis e en elabo a el diseño p ime o pa a mó il y hace lo ex ensible pa a las demás in e aces como able as o pc. En ese sen ido p ime o elabo ábamos los es ilos en el mó il y adap ábamos pa a los demás. Mos amos un ejemplo de código en la siguien e ilus ación donde se en odas las clases p ime o adap adas al mó il y a con inuación una que y que ma ca la isualización a pa i de las able s. 21 Ilus ación 3-17 Código Fi s Mobile (1) Ilus ación 3-18 Código Fi s Mobile (2) Aquí mos amos alguna cap u a con el diseño pa a mó il compa ado con pc: 22 Ilus ación 3-19 Buscado en mó il (1) Ilus ación 3-20 Buscado en mó il (2) Ilus ación 3-21 Buscado en PC 23 • Simpli icación del diseño O o elemen o impo an e ha sido la búsqueda en un diseño sencillo y simple. Haciendo uso de las he amien as y componen es que nos p opo cionaba Angula Ma e ial [15] hemos elabo ado in e aces simples. Sc aping El sc aping es una écnica pa a ealiza la ex acción de da os en las páginas web. Es a ex acción de da os en nues o caso iene como obje i o la ecopilación de los p oduc os de los supe me cados. Con ello ealizamos un es udio del me cado compa ando sus p ecios. Selección de supe me cados: Pa a el desa ollo de la aplicación Alimen icia, se ealizó un es udio p e io pa a la elección de los supe me cados que se inclui ían en la aplicación. El es udio se ealizó en base de a ios c i e ios con el in de ansmi i una expe iencia g a i ican e al usua io. Los supe me cados elegidos son: Alcampo, Aho amas, Dia y E oski. El ac o p incipal pa a de e mina la inclusión de los supe me cados ha sido la acili El ac o p incipal pa a de e mina la inclusión de los supe me cados ha sido la acilidad y accesibilidad en la o ma de pode accede a los p ecios, nomb e del p oduc o, la imagen y si con iene o e a. Todos es os da os es án expues os de mane a pública en sus espec i as páginas web Se es udió la posibilidad de inclui Me cadona, al se uno de los supe me cados con mayo cuo a de me cado, pe o decidimos que es a e sión no inclui la ya que equie e un egis o p e io y es o pod ía supone una di icul ad añadida a la ho a de hace el sc aping. Ilus ación 3-22 Logo Supe me cados 24 En endemos que con es os 4 supe me cados se cub e la necesidad de uno de los obje i os p incipales del p oyec o que es p opo ciona una compa a i a de p ecios de di e en es p oduc os de supe me cado. Añadi más supe me cados ha supues o siemp e una pequeña complicación, no en la ex acción de da os si no en el pos e io a amien o pa a los algo i mos de compa ación. La di e encia de c i e io de los supe me cados en cuan o a la asignación de los nomb es pa a los p oduc os y la asignación de los ni eles de las ca ego ías ha supues o que u ié amos que ealiza un a amien o a los da os ex aídos. Po ejemplo, Al pack de la as los supe me cados los nomb an de di e en e o ma: ● Dia: Re esco de cola clásica Coca-Cola la a 12 x 33 cl. ● Aho amas: Re esco cola Coca-Cola la a pack 12 33 cl. ● E oski: Re esco de cola COCA COLA, pack 12x33 cl. ● Alcampo: COCA COLA ZERO Re esco de cola Ze o azúca pack 12 Uds. x 33 cl. Es o ha eque ido una e o mulación de los nomb es ya que el algo i mo de compa ación no espondía como que íamos así que como comen aban amos an e io men e hemos a ado los da os y se han uni icado nomb es, medidas, con i iendo a minúsculas las ma cas… mejo ando conside ablemen e las compa aciones de ex o. 25 Funcionalidad de la aplicación En es e capí ulo ealiza emos una explicación sob e la uncionalidad de la aplicación, haciendo uso de los di e en es casos de uso gene ales que con o man la aplicación. ● Ges ión de Usua ios ● Ges ión de Compa ado ● Ges ión de Rece as ● Ges ión de Die é ica ● Ges ión de Alimen os de Tempo ada De cada uno de ellos se a a explica cómo se in e p e a cada caso de uso en la aplicación. Ac o es Debemos dis ingui dos ipos de usua ios, el usua io egis ado que en los diag amas de caso de uso end á el nomb e de ac o , y el caso de los usua ios no egis ados que end á el nomb e de anónimo Ges ión de usua ios Ilus ación 4-1 Caso de Uso Ges ión de Usua io(No Regis ado) Ilus ación 4-2 Caso de Uso Ges ión de Usua io(Regis ado) 32 Los usua ios pueden accede al compa ado a a és del menú p incipal de na egación. Ilus ación 4-14 Menú Compa ado Selección de supe me cado Pa a pode ealiza una búsqueda de p oduc o debe á se seleccionado un supe me cado. Exis en dos mane as de elección del supe me cado dependiendo del ipo de usua io: ● Usua io egis ado: Al comple a el egis o, apa ece á una en ana modal pa a elegi el supe me cado il ado po los más ce canos según el código pos al in oducido en el egis o. Si no exis e algún supe me cado de los de inidos en la aplicación po la zona del código pos al, és e pod á se elegido igualmen e. Ilus ación 4-15 Selección Supe me cado Usua io Regis ado ● Usua io no egis ado: Cuando el usua io no egis ado accede al buscado de p oduc os, apa ece á la en ana modal de los supe me cados. En es e caso sin la in o mación de p oximidad. 33 Ilus ación 4-16 Selección Supe me cado Usua io No Regis ado Los usua ios pod án cambia el supe me cado elegido po de ec o en la misma pan alla del supe me cado. El usua io egis ado ambién pod á cambia lo en el menú de na egación, así como el código pos al. Ilus ación 4-17 Pan alla de Búsqueda en el Supe me cado 34 Buscado El usua io pod á ealiza una búsqueda de p oduc os in oduciendo un é mino en el o mula io de búsqueda. Si la búsqueda o ece esul ados se mos a án il os po ca ego ías y subca ego ías de los p oduc os. Ilus ación 4-18 Búsqueda P oduc os Compa ado El usua io pod á añadi p oduc os a un ca i o i ual o ealiza una búsqueda de p oduc os simila es en las opciones de la icha del p oduc o. 35 Ilus ación 4-19 Bo ón Añadi P oduc o y Bo ón P oduc o Simila Si el usua io elige la opción de p oduc o simila , se le p opo ciona a un esul ado de los di e en es supe me cados con el p ecio de ese p oduc o, pa a que pueda e la di e encia. Si el p ecio es una o e a sald á en ojo. 36 Ilus ación 4-20 Resul ado P oduc o Simila Ca i o En el ca i o sald án los p oduc os añadidos y el usua io pod á ealiza di e en es acciones: ● El usua io pod á elimina p oduc os del ca i o pulsando sob e la X que apa ece colocada a la de echa del p oduc o. ● El usua io pod á acia el ca i o pulsando el bo ón con el icono de la papele a, si uado abajo a la de echa. ● El usua io end á la opción de compa a dicha lis a en o os supe me cados pulsando el bo ón “compa ado ”. 37 ● El usua io pod á gua da el ca i o pulsando el bo ón de gua dado. Es a opción es a á habili ada pa a usua ios egis ados. Ilus ación 4-21 Bo ones del Ca i o Ca i os gua dados El usua io pod á accede a sus lis as de ca i os gua dados, median e el menú de usua io o el p opio pe il de usua io comen ado an e io men e, en la ges ión de usua ios. En el lis ado end á la opción de elimina o desca ga la lis a en o ma o pd . 38 Ilus ación 4-22 Ca i os Gua dados Compa ado En la página del compa ado se mos a án las lis as de los supe me cados con los p oduc os simila es a los que haya en el ca i o. El p ecio se mos a á en e de si es el más ba a o y en ojo si es el más ca o 39 Ilus ación 4-23 Compa ado de Lis as 40 Ilus ación 4-25 Caso de Uso Rece as Usua io No Regis ado Ges ión de ece as Los usua ios end án acceso a di e en es lis ados de ece as y aquellos que es én egis ados end án el p i ilegio de pode c ea ece as y ealiza o aciones. Ilus ación 4-26 Menú Rece as Ilus ación 4-24 Caso de Uso Rece as Usua io Regis ado 41 Lis ados Rece as Exis i án a ios lis ados de ece as, la página p incipal donde se mos a án odas las ece as y di e en es lis ados de ece as a o i as, c eadas po el usua io ac i o, de ca ego ías, de usua io. Ilus ación 4-27 Lis ado Rece as Po De ec o A los usua ios egis ados se les mos a á un menú de acceso a lis ados y c eación de ece as. 48 Se ha c eado un es ado de publicación pa a la ece a. La ece a pod á se publicada si iene an o ing edien es como pasos, si no, no pod á se publicada. Ilus ación 4-37 Bo ón Publicación Rece a La ece a puede ene el es ado de no publicada las cuales no les sald án a los demás usua ios, pe o sí al au o de la ece a en o o colo ( e de cla i o) di e en e a las ece as publicadas. 49 Ilus ación 4-38 Rece a No Publicada 50 Modi ica ece a / elimina ece a Los usua ios que han c eado una ece a end án la opción de pode edi a la ep esen ada po el icono de un lápiz y/ o de elimina la ep esen ada con un icono de papele a. Ilus ación 4-39 Bo ones de Elimina y Modi ica Rece a In e acción ece as ( a o i os y pun uación + comen a io) El usua io au en icado end á opción de in e ac ua con las ece as dando a o i o, pun uando la ece a y/o añadiendo un comen a io. Pa a añadi o qui a de a o i os una ece a el usua io pod á hace lo en las a je as de la ece a de los lis ados pulsando el icono del co azón. 51 Ilus ación 4-40 Bo ón Fa o i os Rece a El usua io au en icado pod á o a la ece a accediendo al de alle de la misma, pod á alo a la ece a y añadi un comen a io que no es obliga o io. Si el usua io ya ha o ado la ece a le sald á su o ación y no pod á ol e a o a . 52 Ilus ación 4-41Vo aciones Rece a Ges ión de die é ica Ilus ación 4-42 Caso de Uso Die é ica Usua io Regis ado/ Usua io No egis ado El apa ado de die é ica cons a de una página de in o mación nu icional y o a de una calculado a de calo ías ecomendadas. Podemos accede a dichas páginas a a és del menú p incipal. 53 Busca In o mación nu icional Ilus ación 4-43 Menú Die é ica-In o mación Nu icional El usua io ealiza á una búsqueda in oduciendo un é mino en el o mula io, si iene éxi o se mos a á los esul ados elacionados con esa búsqueda. Los lis ados de los p oduc os end án dos opciones: ● La in o mación del p oduc o, así como su alo nu icional Ilus ación 4-44 Valo Nu icional ● La in o mación nu icional del p oduc o 54 Ilus ación 4-45 In o mación Nu icional Calculado a Calo ías Ilus ación 4-46 Menú Die é ica-Calculado a de calo ías El usua io pod á ealiza un cálculo de las calo ías que debe á consumi con o me a di e sos ac o es, como su sexo, al u a, edad, peso y ecuencia de ac i idad ísica. Se ealiza á un cálculo y se in o ma án de las calo ías que debe á consumi . 55 Ilus ación 4-47 Calculado a de Calo ías 56 Ges ión de alimen os de empo ada Ilus ación 4-48 Caso de uso Alimen os de Tempo ada Usua io Regis ado/ Usua io No Regis ado Los usua ios end án acceso a un apa ado de alimen os de empo ada a a és del menú de na egación. Ilus ación 4-49 Menú Alimen os de Tempo ada 57 Lis ado Se mos a á un lis ado con odos los p oduc os donde se mos a án con colo los alimen os que es én en empo ada, semi anspa en es los alimen os que es án en ando o saliendo de empo ada y en g is los alimen os que no es án de empo ada. El usua io pod á il a los alimen os po meses o po ca ego ía. La página siemp e se inicia con el mes ac ual. Ilus ación 4-50 Lis ado Alimen os Tempo ada 64 Ilus ación 5-5 Es uc u a de ca pe as del módulo de Componen es ○ gua ds: Los gua ds [19] en Angula son un elemen o de segu idad y p o ección de is as que p opo ciona angula . En nues o caso las u ilizamos pa a da o no acceso a los usua ios dependiendo si son anónimos o au en icados. ○ in e aces: Es e di ec o io con iene las di e en es in e aces comunes independien es a los módulos que pueden de ini algún modelo necesa io pa a la aplicación. ○ pipes: Las pipes [20] de Angula son uncionalidad pa a ans o ma da os. En nues o caso de inimos algunos pipes cus om pa a el a amien o de cadenas de ex o que no p opo cionaba el co e de Angula . ○ se ice: Di ec o io con se icios gene ales. Po ejemplo, un se icio que hemos de inido pa a p opo ciona el lis ado po de aul de los supe me cados o de las ca ego ías de di icul ad de la ece a. ○ sha ed: En es e di ec o io se in oducen di ec i as [21] comunes a la aplicación. ○ componen e app: Es el componen e aíz y p incipal de la aplicación donde es á de inido el ou e ou le de angula . El ou e ou le es el 65 componen e donde se inyec an los demás componen es de la aplicación. ● asse s: Con iene las imágenes de la aplicación y a chi os necesa ios. ● En i onmen s: Se encuen an las con igu aciones y a iables de en o no. ● a icon: El a chi o del icono del p oyec o. ● index.h ml: A chi o de la página p incipal del p oyec o. ● main. s: Es el a chi o TypeSc ip inicial del p oyec o donde aplican las con igu aciones globales del p oyec o. Los demás a chi os son p opios del p oyec o y donde se ealizan con igu aciones an o del edi o , de gi , la con igu ación de angula e c. Es uc u a del backend En el desa ollo local se ha desplegado el se ido en el pue o 3007 den o del con enedo Docke . Se ha seguido el pa ón modelo-con olado con una sepa ación de esponsabilidades. Explica emos con inuación dos de las uncionalidades cla e que ealizamos en el se ido : la compa ación de p oduc os y la au en icación po oken. Compa ación de p oduc os La compa ación de p oduc os de supe me cado comienza con la c eación de un modelo “P oduc o” donde gua damos la in o mación de los da os sacados de los supe me cados. En el siguien e apa ado de las bases de da os se explica cómo es á cons uida la abla con iene los campos del modelo. Dos de esos campos son cla e pa a el p oceso de compa ación: la ma ca y el nomb e. Pa a en ende el p oceso p ime o explica emos cómo unciona algo i mo de compa ación. Apoyados en la lib e ía s ing-simila i y lo que hacemos es compa a el nomb e del p oduc o palab a po palab a has a encon a cadenas simila es de ol iendo un nume o en e 0 y 1. Cuan o más ce ca del uno, más palab as iguales hab á encon ado en e dos cadenas de palab as dadas, en nues o caso los nomb es. 66 El hecho de ene que modi ica las cadenas de los supe me cados y adap a las en e cada uno de ellos ue en pa e po es e ipo de algo i mo po que se daba el caso que palab as muy pa ecidas las hacía ma ch y el esul ado no e a el espe ado. Explicado el uncionamien o de como encon a nomb es simila es, pa a aco a más las posibilidades de éxi o lo que hacemos p ime o es compa a las ma cas. Si el p oduc o iene la misma ma ca, buscamos en ese sen ido y las posibilidades aumen an. Si no, di ec amen e compa amos el nomb e. Pod íamos in oluc a las p opias ca ego ías de los p oduc os, pe o ol e íamos al mismo p oblema comen ado con los nomb es, end íamos que uni ica c i e ios. Hemos es ablecido un mínimo pa a cuando se hace ma ch con la ma ca de 0.55 lo cual es un al o po cen aje, di e en e de cuando no es la misma ma ca que lo bajamos a 0.45 ya que así podemos encon a p oduc os más a iados, pe o con el hándicap de que a eces nos encon amos p oduc os que no ienen nada que e . Vamos gua dando el alo más al o encon ado an o del p oduc o con la misma ma ca, si lo iene, como del p oduc o con dis in a ma ca. A con inuación, mos amos pa e del código donde se e lo explicado an e io men e. Ilus ación 5-6 Pa e del código de compa ación de p oduc os Au en icación po Token Como hemos comen ado an e io men e hemos ealizado una au en icación po oken (JWT). Es o consis e en p opo ciona un oken al usua io al inicia sesión pa a 67 pe mi i ealiza solici udes al se ido desde el on end y se de uel an los da os. En es a pa e, si las cabece as de la pe ición aen el oken, a a és de un middlewa e, pe mi i á el acceso a la pe ición. Aquí mos amos pa es del código del se ido in oluc adas en es a uncionalidad: Ilus ación 5-7 Login de usua io y gene ación de oken Ilus ación 5-8 Ve i icación del oken 68 Ilus ación 5-9 Middlewa e de au en icación de un usua io Di ec o ios A con inuación, mos amos los di ec o ios del backend Ilus ación 5-10 Es uc u a de ca pe as Backend 69 ● con olle s: Di ec o io con los con olado es de la aplicación donde se ealiza la lógica. ● dis : Di ec o io donde se albe ga la build de la aplicación. ● models: Di ec o io donde de inimos los modelos con Sequelize. ● node_modules: Con iene odas las dependencias de nues o p oyec o. ● public: Di ec o io con los a chi os públicos del se ido . Donde se suben las imágenes, a chi os, e c. ● ou e s: Di ec o io que con iene las u as de la aplicación. ● u ils: A chi o con middlewa es gene ales, se icios y a chi os de con igu ación. En la aíz del backend nos podemos encon a con a chi os de con igu ación, el a chi o de las a iables de en o no y dos a chi os impo an es: ● app.js: Es e es el a chi o p incipal de la aplicación. El en y poin donde se inicia el se ido , dónde se impo an las lib e ías p incipales y se decla an las u as. ● con ig.js: En ese a chi o se ealiza la conexión a la base de da os. Es uc u a del Sc aping. ● Sc aping: en es a ca pe a es e con enido la lógica pa a hace el Web Sc aping en los di e en es supe me cados. Ilus ación 5-11 Es uc u a de ca pe as Sc aping Pa a desa olla los sc ip s de los sc aping, ealizamos un b e e es udio de cómo es aban es uc u adas las di e en es webs, de los supe me cados que a amos. Con ese 70 p e io es udio, iden i icamos si las webs con ienen ca gas dinámicas o no, y como se es uc u an los da os que que emos ob ene . Pa a el desa ollo de los sc ip s de sc aping, se c ea un axio que es una he amien a de Ja aSc ip , pa a en ia solici udes HTTP, en el c eamos una cabece a de na egado pa a pode en ia pe iciones a las webs de los supe me cados pa a e i a se iden i icados como un obo . Ilus ación 5-12 F agmen o Código Sc aping Axios Cada sc ip iene un o ma o di e en e, ya que cada web iene las e ique as de los nomb es, p ecios, imágenes, ca ego ías de los p oduc os, iden i icadas de di e en e o ma. En algunos casos hemos c eado una unción que imi a el sc oll que se ha ía en una web como en los casos de Dia, E oski y Alcampo, es e úl imo iden i icamos que los p oduc os se ca gan de o ma dinámica y lo que ealizamos es den o de la unción del sc oll la ecopilación de da os, ya que iden i icamos que cuando se hace sc oll en la página desapa ecen los da os con o me la isualización que se mos aba. 71 Ilus ación 5-13 F agmen o de Código sc aping Au oSc oll También en uno de los sc ip s enemos la in e p e ación de pulsa el bo ón de mos a más esul ados, en es e caso pa a el Aho amas. Se ealiza a a és del que ySelec o que lo que ealiza es busca en la página el bo ón de más esul ado, que iene la e ique a: show-mo e bu on-mo e. Ilus ación 5-14 F agmen o de Código “Bo ón Mas Resul ados” 72 Todos esos sc ip s una ez que han ecopilado los da os los an inse ando en una base de da os. Cuando se han ealizado las inse ciones en dicha base de da os, odos esos da os se expo an a la base de da os de alimen icia, pe o con una p e ia modi icación. Es a p e ia modi icación consis e en que, los nomb es de los p oduc os ex aídos de los supe me cados son di e en es, aunque se a e del mismo p oduc o, con ello nos dimos cuen a de que al ealiza la compa ación no lo hacía co ec amen e. Po an o, ealizamos una maque ación p e ia de los nomb es como se mues a en la siguien e imagen. Ilus ación 5-9 F agmen o de Código sc aping Au oSc oll An es de inse a los en la base de da os de Alimen icia, ab e iamos odas las unidades de medida que pueda habe , las sepa amos de sus dígi os, uni icamos odos los decímales y uni icamos la mane a de nomb a los packs. 73 Es uc u a de la base de da os de la aplicación web En es e apa ado explica emos cómo es á es uc u ada la base de da os de nues a aplicación pun o explica emos las dos bases de da os de las que disponemos una pa a el sc aping y o a pa a la aplicación gene al. Pa a la aplicación gene al, Alimen icia. És a con end á oda la in o mación de la aplicación pa a ealiza su co ec o uncionamien o, como los usua ios, las ece as, los alimen os de empo ada y los p oduc os modi icados de los supe me cados. La o a base de da os llamada Sc appingAlimen icia, con end á odos los p oduc os de los supe me cados en b u o. Base de da os: Alimen icia Pa a la c eación de las ablas de Alimen icia nos hemos apoyado en la lib e ía Sequelize pa a NodeJs que como hemos explicado an e io men e es un ORM pa a base de da os elacionales. Hemos de inido los siguien es modelos: ● Alimen o ● Almacenaje ● Bene icio ● Ca ego iaAlimen o ● Ca ego iaRece a ● Comp a ● P oduc o ● Valo acion ● Rece a ● Seleccion ● Tempo ada ● Usua io 80 Sc appingAlimen icia Ilus ación 6-3 Es uc u a Base de Da os sc aping Alimen icia Es a á compues a po cua o ablas con los siguien es nomb es, es as ablas con end án los p oduc os de los supe me cados: ● p oduc os_dia: con end á los p oduc os pe enecien es al supe me cado día. ● p oduc os_aho amas: con end á los p oduc os pe enecien es al supe me cado Aho amas. ● p oduc os_e oski: con end á los p oduc os pe enecien es al supe me cado E oski. ● p oduc os_alcampo: con end á los p oduc os pe enecien es al supe me cado Alcampo. Todas es as ablas con ienen es a es uc u a: ● id: cla e p ima ia de las ablas an e io es. ● id_p oduc o: iden i icado de cada uno de los p oduc os de los supe me cados. ● También con iene la in o mación del nomb e y la imagen. ● p ecioNo mal: es del ipo decimal, con iene el p ecio que iene el p oduc o. 81 ● p ecioO e a: es del ipo decimal, con iene el p ecio en o e a que iene el p oduc o. ● ma ca: Indica la ma ca del p oduc o. ● supe me cado: Indica el supe me cado que pe enece el p oduc o, si es del E oski, Aho amas, día o Alcampo ● También con ine es os a ibu os ca ego iaSupe 1, ca ego iaSupe 2 y ca ego iaSupe 3, que gua dan la ca ego ía p incipal del p oduc o, su subca ego ía p incipal y si iene subca ego ías. 82 83 Conclusiones y abajos u u os Conclusiones del abajo La ealización del p oyec o nos ha pe mi ido e oluciona en el desa ollo web. Los dos in eg an es del equipo abajamos en es e ámbi o y habe plan eado la ealización del p oyec o con unas ecnologías que no usamos en el día a día como puede se Angula y NodeJs, pa a noso os ha sido de una lección en adap abilidad y ap endizaje, además de una mo i ación pa a ap ende di e en es ecnologías. Se ha podido cumpli con las expec a i as ma cadas al p incipio, ealizando un análisis y abajo minucioso de Web sc aping, con odas las complicaciones que ello ha lle ado y alen izando en ocasiones el desa ollo, como el cambio de web en el supe me cado día una ez ealizado el p ime sc apeado eniendo que ol e a desa olla lo. Aun así, hemos conseguido inalmen e una compa ación de p oduc os en e supe me cados con un al o po cen aje de acie o y ese e a uno de nues os p incipales obje i os. Además, hemos ealizado una aplicación in ui i a y ápida aunando mucha uncionalidad que pensamos que es muy p o echosa pa a la gen e. Podemos conclui que hemos cumplido con el obje i o p opues o inicialmen e en el p oyec o, apo ando un alo di e encial con las di e en es aplicaciones que puede habe online, como es la compa a i a de p oduc os de supe me cado. Nos queda la espina de no habe podido ealiza al comple o el apa ado de die as, ya que una de las ideas iniciales es que los usua ios pudie an ealiza die as en base a p oduc os. Limi aciones En un ámbi o en el que se depende de e ce os como son p oduc os de supe me cados y no dispone de Apis públicas o de pago, el man enimien o de la aplicación es bas an e impo an e de ca a al u u o de la aplicación. El hecho de 84 depende de sc apea páginas y que es ás pudie an cambia , como así ha pasado du an e el p oyec o, exige da se icio cons an e. Líneas de abajo u u o. Du an e el desa ollo del p oyec o hemos ido iendo di e en es á eas que pueden po encia nues a aplicación, como po ejemplo de usa in eligencia a i icial en nues os algo i mos de compa ación que no pod ía ayuda en llega a un 100% de acie o y da un mejo esul ado. Algunas líneas pa a implemen a en un u u o son la c eación de a eas au omá icas, como el sc apeado de da os y su pos e io ans o mación. Es o nos ayuda ía en una co ec a ac ualización de da os de o ma au omá ica. También una de las ideas que nos su gie on du an e el p oyec o es da sopo e de susc ipción a los alimen os de empo ada. La gen e ecibi ía ale as en los cambios de mes, pudiendo obse a que p oduc os es án de empo ada. Compa i ece as po edes sociales, Wha sApp o co eo elec ónico es o a de las líneas que nos gus a ía implemen a pa a o ece al usua io uncionalidades ac uales de compa i . 85 In oduc ion Today, he economic si ua ion we li e in has c ea ed he need o many amilies o sa e on hei daily expenses. The ac ha he e is o en no enough ime o o ganize leads o excessi e consump ion and unnecessa y spending. Many amilies ha e had o adjus hei budge s and seek solu ions o educe expenses and op imize shopping mo e e icien ly. In his con ex , he idea o de eloping a web applica ion ha acili a es hese asks o people has eme ged. The documen will co e he p elimina y s udy and he alue ou applica ion p o ides (Chap e 2), he ools and echnologies used (Chap e 3) o p ojec de elopmen , as well as he unc ionali y and a chi ec u e o he applica ion componen s (Chap e s 4, 5, and 6). Finally, we will p esen conclusions and u u e di ec ions (Chap e 7). Mo i a ion Ha e we e e s opped o compa e di e en p ices o he same p oduc ac oss a ious supe ma ke s? O en, while shopping, we wonde i a p oduc would be cheape in ano he supe ma ke o i i ’s on sale. Alimen icia can be you g ea ally when making pu chases o acking di e en p oduc s o ind he bes deals. Addi ionally, when we p epa e a ecipe o come ac oss one in a pla o m, magazine, o ele ision, we o en wonde how much ha ecipe would cos . Alimen icia also p o ides he op ion o add he ing edien s om a ecipe and calcula e he cos based on ha . Fu he mo e, when we isi he supe ma ke , we some imes don’ know which p oduc s a e in season. As a esul , we may end up buying oods ha , al hough a ailable in he supe ma ke , a e p iced highe han du ing o he mon hs. Alimen icia ga he s in o ma ion abou ui s and ege ables, indica ing which mon hs hey a e in season o when hey a e going in o ou o season 86 Goals The main objec i e o his p ojec is o de elop a web applica ion ha assis s use s in easily and con enien ly ob aining supe ma ke p oduc p ices wi hou ha ing o access each co esponding page indi idually. This allows use s o compa e p oduc s and decide whe e o make hei pu chases. The applica ion also p o ides ea u es such as c ea ing a pe sonal o communi y ecipe book and calcula ing he o al p ice o a ecipe. Ano he goal o his p ojec is o de e mine which mon hs he main oods we consume a e in season. To achie e hese objec i es, he ollowing s eps ha e been aken: • Analyzing o he applica ions ela ed o ou s. • S udying and applying web sc aping echniques o au oma ic ex ac ion o da a and p oduc p ices om supe ma ke pages. • U ilizing public da a and APIs o enhance he applica ion’s unc ionali y as much as possible. • De eloping and implemen ing ea u es, including use egis a ion, compa ison algo i hms, and da abase managemen o smoo h pla o m ope a ion. • C ea ing documen a ion ha explains he c ea ion p ocess and de elopmen o he applica ion. Wo k plan To achie e he p ojec objec i es, we ha e o ganized he p ocess in o se e al phases, each adap ed o help us each ou p oposed goals: • Resea ch and Analysis: o In es iga e and analyze he main app oaches o applica ion de elopmen . o S udy he se ices o ools needed o de elopmen and in eg a ion wi h he chosen echnologies. 87 o Sea ch o publicly a ailable da a sou ces (such as ood da abases, nu i ion in o ma ion, logos, image banks, and icons). o Resea ch web sc aping echniques. o Examine o he simila applica ions. • Design and S uc u e: o C ea e he applica ion’s iews (use in e aces). o De ine he applica ion’s models (da a s uc u es). • De elopmen and Implemen a ion: o Pe o m web sc aping and in eg a e he da a wi h ou da abase. o Implemen he p oposed use cases. • Tes ing, Documen a ion, and Deli e y: o P epa e comp ehensi e documen a ion co e ing all aspec s o he de elopmen p ocess. Conclusions and u u e wo k Conclusions The comple ion o he p ojec has allowed us o e ol e in web de elopmen . Bo h eam membe s wo k in his ield, and p oposing he p ojec using echnologies we don’ use in ou day- o-day wo k, such as Angula and Node.js, has been a lesson in adap abili y and lea ning o us. I has also mo i a ed us o explo e di e en echnologies. We managed o mee he expec a ions se a he beginning by conduc ing ho ough web sc aping analysis and wo k. Despi e he complica ions and occasional slowdowns due o changes in supe ma ke websi es (such as he need o ede elop a e he ini ial sc aping), we ul ima ely achie ed a success ul p oduc compa ison be ween supe ma ke s, which was one o ou main objec i es. 88 Addi ionally, we c ea ed an in ui i e and as applica ion ha combines many use ul ea u es o use s. In summa y, we ul illed he ini ial p ojec objec i e, p o iding a unique alue compa ed o o he online applica ions, such as supe ma ke p oduc compa ison. Howe e , we eg e no being able o ully implemen he die a y sec ion. One o ou ini ial ideas was o allow use s o c ea e die s based on p oduc s. Limi a ions In a con ex whe e one elies on hi d-pa y p oduc s such as supe ma ke i ems and does no ha e access o public o paid APIs, main aining he applica ion is qui e impo an o i s u u e. Depending on web sc aping and he possibili y o pages changing, as has happened du ing he p ojec , equi es cons an se ice. Fu u e Wo k Du ing he p ojec de elopmen , we ha e iden i ied di e en a eas ha could enhance ou applica ion. Fo example, using a i icial in elligence in ou compa ison algo i hms could help achie e be e accu acy and esul s. Some u u e implemen a ion ideas include c ea ing au oma ed asks, such as da a sc aping and ans o ma ion, o ensu e p ope da a upda es au oma ically. Addi ionally, p o iding subsc ip ion suppo o seasonal oods, whe e use s ecei e ale s du ing mon h changes o see which p oduc s a e in season, is ano he ea u e we’d like o implemen . Sha ing ecipes ia social media, Wha sApp, o email is also on ou lis o o e use s cu en sha ing capabili ies. 89 Con ibuciones Pe sonales Pa a la ealización de es e p oyec o nos hemos o ganizado de o ma con inua en la mayo ía del iempo que ha du ado el p oyec o. El p ime e cio cada uno hizo un análisis de odo el p oyec o y de los casos que conside amos impo an es ( ecnologías, web sc aping, aplicaciones del me cado). Conjun amen e in es igamos cómo y dónde pod íamos desplega la aplicación en la web. También hicimos la búsqueda de in o mación de los alimen os de empo ada, así como los asse s de mane a conjun a sin ene en cuen a la can idad que cada uno ecogía. Una ez comenzamos con el desa ollo, nos euníamos pa a analiza el caso de uso y empeza el desa ollo conjun amen e. Se puede deci que pa a la mayo ía del desa ollo hemos usado una écnica llamada pai p og aming. [22] A con inuación, explica emos que pa es ha podido ealiza cada alumno de o ma indi idual Jesús Velez Ayuso • Es udio p e io de las ecnologías a u iliza . D upal y La a el siemp e es u ie on en la cabeza po los conocimien os en php que enemos, pe o al inal nos decidimos po Angula , ya que no necesi ábamos un CMS an po en e pa a desa olla la aplicación y Angula suponía un desa ío pa a noso os al ene que desa olla una aplicación di e en e y al inal nos decidimos po Angula , in i ió el iempo en conoce es e lenguaje de p og amación, aunque Da id ya disponía de cie os conocimien os. También In es igó como mon a un Docke con MySQL, angula y node pa a el desa ollo local. • Web Sc aping Análisis de los nomb es de los supe me cados, así como sus ca ego ías pa a su 96 Ilus ación B-0-3 De alle alimen o buscado 97 Ilus ación B-0-4 Lis ado ece a 98 Ilus ación B-0-5 De alle de la ece a 99 Ilus ación B-0-6 In o mación nu icional de alimen o 100 Ilus ación B-0-7 Calculado a de calo ías 101 Ilus ación B-0-8 Alimen os de empo ada 102 Ilus ación B-0-9 Alimen o de empo ada Adjun amos ambién un pd a un d i e donde comple amos odas las in e aces que hicimos inicialmen e: • h ps://d i e.google.com/ ile/d/1VK2IS43mWeqkZ0 NRzWNgiUYbyY P1xZ/ iew?usp=sha ing 103 Apéndice C - Bibliog a ía alimen os de empo ada Adjun amos un pd con las páginas web donde uimos ecopilando oda la in o mación de los alimen os que apa ecen en el apa ado de alimen os de empo ada (No hemos que ido mos a los enlaces en la memo ia po que son 15 páginas de enlaces) Adjun amos cap u as y el enlace al d i e p i ado accesible con enlace: • h ps://d i e.google.com/ ile/d/1HkRiL1e8FFckh3x LUi6oh8jS8mZsKVE/ iew ?usp=sha ing Ilus ación C-0-10 Bibliog a ía de alimen os de empo ada