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 David: Principalmente a mis padres con el gran apoyo y paciencia que han tenido. A mi novia Sara, que me apoyada en todo momento y sobre todo me ha ayudado a aclarar la cabeza en momentos de duda. Jesús: A las 3 mujeres que me han hecho, me hacen y me harán feliz en la vida. Mi madre por todo el sufrimiento acumulado estos años de vaivenes en mis estudios, mi pareja por todas esas noches en vela y mi futura hija que estará con nosotros en septiembre. 3 AGRADECIMIENTOS En particular agradecemos los dos a Ramón González Del Campo, nuestro tutor, por su amabilidad y total disponibilidad. David: A mis padres que siempre me han apoyado en todo y siempre me han ayudado. A mi novia Sara, que siempre me ha animado en todo lo que me he propuesto, el apoyo que recibo de ella. Jesús: A mi pareja, Raquel, por todo el apoyo y ánimo. Sin ti no habría sido posible. A mis padres por su paciencia y no desistir en los ánimos. A mi jefe, Juanen, por su total apoyo y confianza tanto laboralmente como personalmente, animándome a terminar los estudios de la mejor manera posible. 4 RESUMEN Alimenticia, una aplicación web para organizar tus recetas y compras en un solo lugar. En la actualidad la gente no tiene tiempo para poder desarrollar sus actividades diarias adecuadamente, ya sea por el trabajo o sus necesidades personales, y en un contexto de dificultad económica para muchas personas hemos ideado con este proyecto proponer una posible solución a estos problemas. Nuestro trabajo de fin de grado propone una herramienta para comparar precios de supermercados, hacer listas de la compra para optimizar el presupuesto, consultar la información nutricional de diferentes alimentos y podrá calcular las calorías que deberá consumir, saber qué productos están de temporada e incluso tener un recetario online y compartir recetas con la comunidad. Una parte fundamental de este proyecto es el uso de web scraping, donde a partir de esta técnica extraemos de forma automatizada datos de páginas web. En nuestro caso, se ha utilizado JavaScript para la extracción de los precios y diferentes datos de los supermercados. En la aplicación tenemos 2 roles diferentes, el usuario autenticado y el usuario anónimo. El usuario autenticado, además de contar con su propio perfil podrá guardar listas de recetas favoritas, crear recetas y listas de la compra virtuales con el precio de los alimentos. En definitiva, el usuario registrado tendrá más privilegios que un usuario anónimo. Dicho esto, la funcionalidad principal de nuestra aplicación que es la consulta de precios y comparativa de supermercados estará disponible para cualquier usuario. Palabras clave Aplicación web, Web scraping, MySQL, Api, Comparador, Recetario, Alimentación, dietética, ahorro. 5 ABSTRACT Alimenticia, a web application to organize your recipes and purchases in one place. At present, people don’t have time to carry out their daily activities properly, whether due to work or personal needs. In a context of economic difficulty for many individuals, we have devised this project to propose a potential solution to these problems. Our final degree project proposes a tool for comparing supermarket prices, creating shopping lists to optimize budgets, checking the nutritional information of different foods, and calculating the calories one should consume. It also allows users to know which products are in season and provides an online recipe book for sharing recipes with the community. A fundamental part of this project involves web scraping, where we automatically extract data from web pages using this technique. In our case, JavaScript has been used for extracting prices and other supermarket-related data. Within the application, we have two different roles: authenticated users and anonymous users. Authenticated users, in addition to having their own profile, can save favorite recipe lists, create recipes, and virtual shopping lists with food prices. Ultimately, registered users will have more privileges than anonymous users. That said, the main functionality of our application—price comparison and supermarket comparison—will be available to any user. Keywords Web application, Web scraping, MySQL, APIs, Comparator, Recipe book, Nutrition, Dietetics, Savings. 6 ÍNDICE DE CONTENIDOS Contenido Introducción ...................................................................................................................... 1 Motivación ............................................................................................................ 1 Objetivos ............................................................................................................... 2 Plan de trabajo ..................................................................................................... 3 Estado de la cuestión ....................................................................................................... 5 Aplicaciones Similares .......................................................................................... 5 Soysuper ................................................................................................................ 5 Ahorro mercado ................................................................................................... 6 Super más barato ................................................................................................. 6 Nutricienta ............................................................................................................ 7 OCU ....................................................................................................................... 8 Soy de temporada ............................................................................................... 9 Valor de nuestra aplicación ................................................................................ 9 Fundamentos teóricos y tecnológicos ..........................................................................11 Tecnologías utilizadas .........................................................................................11 Backend ...............................................................................................................11 Frontend ...............................................................................................................13 7 Tecnologías Generales .......................................................................................15 Fundamentos de desarrollo web utilizados ......................................................18 Scraping ...............................................................................................................23 Selección de supermercados: ...........................................................................23 Funcionalidad de la aplicación .....................................................................................25 Actores .................................................................................................................25 Gestión de usuarios .............................................................................................25 Registro .................................................................................................................26 Inicio de sesión ....................................................................................................27 Perfil de usuario ...................................................................................................28 Eliminar perfil ........................................................................................................29 Cerrar sesión ........................................................................................................30 Gestión del comparador ....................................................................................31 Selección de supermercado .............................................................................32 Buscador ..............................................................................................................34 Carrito ...................................................................................................................36 Carritos guardados .............................................................................................37 Comparador ........................................................................................................38 Gestión de recetas ..............................................................................................40 Listados Recetas ..................................................................................................41 Detalle de la receta ............................................................................................44 Administrar receta ...............................................................................................45 Interacción recetas (favoritos y puntuación + comentario) ...........................50 Gestión de dietética ...........................................................................................52 8 Gestión de alimentos de temporada ................................................................56 Arquitectura de la aplicación Web ...............................................................................60 Desarrollo local y despliegue .............................................................................60 Estructura del frontend .......................................................................................62 Directorios ............................................................................................................62 Estructura del backend ......................................................................................65 Comparación de productos ..............................................................................65 Autenticación por Token ....................................................................................66 Directorios ............................................................................................................68 Estructura del Scraping. ......................................................................................69 Estructura de la base de datos de la aplicación web ................................................73 Base de datos: Alimenticia .................................................................................73 Alimento: ..............................................................................................................74 Almacenaje: ........................................................................................................75 Beneficio: .............................................................................................................75 Seleccion: ............................................................................................................75 Temporada: .........................................................................................................76 Recetas ................................................................................................................76 Categoria_receta: ..............................................................................................77 Recetas_favoritas: ...............................................................................................77 Usuarios: ................................................................................................................78 Valoracion: ...................................................................................................78 Compra: .......................................................................................................79 Producto: ......................................................................................................79 15 1 Introducción Hoy por hoy la situación económica en la que vivimos ha generado la necesidad en muchas familias de ahorrar en sus gastos diarios. El hecho de muchas veces no tener tiempo para organizarse lleva muchas veces a ese consumo excesivo y gasto innecesario. Muchas familias han tenido que ajustar sus presupuestos, buscar soluciones que permitan reducir el gasto y optimizar las compras de manera más eficiente. De esta manera surge la idea de desarrollar una aplicación web que facilite a las personas estas tareas. Ilustración 1-1 Logo Alimenticia En este documento desarrollaremos como ha sido el estudio previo y que valor aporta nuestra aplicación (Capítulo 2), cuáles han sido las herramientas y tecnologías utilizadas (Capitulo 3) para el desarrollo del proyecto, así como la funcionalidad y arquitectura de los componentes de la aplicación (Capítulo 4, 5 y 6). Por último, elaboradores unas conclusiones, así como unas líneas a seguir en el futuro (Capítulo 7) Motivación ¿Nos hemos parado alguna vez en consultar distintos precios de un mismo producto en varios supermercados? Habitualmente nos ocurre que estamos comprando y pensamos si ese producto sería más barato en otro supermercado o si tendría alguna oferta. Alimenticia será tu gran aliado a la hora de realizar tu compra o de rastrear distintos productos en busca de las mejores ofertas. 2 También cuando realizamos alguna receta o la vemos en alguna plataforma, revista o televisión, nos preguntamos cuánto nos costaría esa receta. Alimenticia también te ofrece la posibilidad de añadir los ingredientes que tiene una receta y en base a ello calcular el precio que te costaría. Además, muchas veces que acudimos al supermercado no sabemos qué productos son de temporada por lo que a veces compramos alimentos que, aunque están en el supermercado están a un precio más alto que otros meses al punto. Alimenticia reúne frutas y verduras donde se muestra en qué mes está de temporada o en qué meses ha salido o está entrando de temporada. Objetivos El objetivo principal de este proyecto es el desarrollo de una aplicación web que sirva de ayuda para los usuarios de una manera fácil y cómoda en la obtención de los precios de productos de supermercados sin tener que acceder a cada página correspondiente y así poder realizar comparativas de productos y decidir en cuál hacer la compra. La aplicación también proporciona la creación de un recetario propio o compartido con la comunidad y poder obtener el precio total de la receta. Otro de los objetivos planteados en este proyecto es la obtención de en qué meses están de temporada los principales alimentos que consumimos. De esta manera para llevar a cabo el proyecto se han creado una serie de objetivos a seguir: ● Análisis de otras aplicaciones que guarden relación con la nuestra. ● Estudio y aplicación de técnicas de web scraping para la extracción de manera automática de datos y precios de productos de páginas de supermercados. ● Utilización de datos y APIs públicas para enriquecer la funcionalidad de la aplicación en la medida de lo posible. 3 ● Desarrollo e implementaciones de funcionalidades, como el registro de usuarios algoritmos de comparación, gestión de base de datos para un buen funcionamiento de la plataforma, autenticación por token. ● Creación de una documentación donde se explica el proceso de creación y desarrolla la aplicación. Plan de trabajo Para lograr los objetivos del proyecto nos hemos organizado en una serie de fases adaptadas para intentar alcanzar los objetivos propuestos en cada una de ellas. En el desarrollo web, y en otros tipos de proyecto, se suelen definir unas etapas para el desarrollo global del proyecto y es el plan de trabajo que hemos realizado. [1] ● Investigación y análisis: ○ Se realiza una investigación y análisis de las principales vías para el desarrollo de la aplicación. ○ Se lleva a cabo un estudio de los servicios o herramientas que necesitaremos para el desarrollo y la integración con las tecnologías a usar ○ Búsqueda de fuentes de datos públicos. (Base de datos de alimentos, nutrición, etc., logos, bancos de imágenes, iconos) ○ Investigación de web scraping ○ Estudio de otras aplicaciones similares ● Diseño y estructura ○ Elaboración de las vistas de la aplicación ○ Elaboración de los modelos de la aplicación ● Desarrollo e implementación: ○ Realización del Web scraping e integración de los datos con nuestra base de datos ○ Desarrollo de los casos de uso propuestos. ● Pruebas, documentación y entrega: ○ Elaboración de la memoria con todos los aspectos del proceso de desarrollo 5 Estado de la cuestión En esta sección, se mostrará un análisis actual de la situación, realizando una comparación con las aplicaciones similares existentes, aportando soluciones disponibles y sus características. Concluimos con el valor añadido de nuestra aplicación sobre el resto. Aplicaciones Similares Soysuper Soy Super, es una aplicación que permite a los usuarios comparar los precios de los alimentos en supermercados. También puedes realizar la lista de la compra, con la opción de enviar la lista a la web del supermercado, para poder realizar la compra online. Una aplicación muy completa que nos sirvió de inspiración para la parte de comparador de nuestro proyecto. ● Puntos fuertes: Amplia gama de supermercados. Enviar la cesta al supermercado para realizar la compra online. ● Puntos débiles: A veces las comparaciones de productos no son exactas. Ilustración 2-1 Pantalla Soy Super 6 Ahorro mercado Ahorra mercado, es una aplicación similar a soySuper. Permite buscar productos de supermercado y te muestra una lista con el precio y los supermercados en los que está disponible el producto. ● Puntos fuertes: Amplia gama de productos. ● Puntos débiles: Las búsquedas son un poco inexactas. Necesitas registrarte para la mayoría de las funcionalidades y hace la página poco intuitiva. Ilustración 2-2 Pantalla Ahorro Mercado Super más barato Super más barato es un buscador de productos de supermercado. Puedes seleccionar los supermercados y te muestra un listado de los productos, mostrando el precio del producto, pero no puedes hacer nada más. ● Puntos fuertes: Amplia gama de supermercados. ● Puntos débiles: Información simple del producto sin nada más que poder realizar. 7 Ilustración 2-3 Pantalla Super Más Barato Nutricienta Nutricienta, es un portal de nutrición y recetas. Esta página ofrece a los usuarios recetas, información nutricional de los alimentos y cursos para comenzar con una nutrición más saludable bastante completa. ● Puntos fuertes: Información nutricional completísima de las recetas. La web está realizada y mantenida por un equipo profesional que trabaja en el ámbito de la nutrición lo que hace que la web sea muy completa nutricionalmente hablando. Contiene un apartado de noticias sobre nutrición que también le aporta mucho valor. ● Puntos débiles: Hay una sobrecarga de información que no la hace amigable. 8 Ilustración 2-4 Pantalla Nutricienta OCU La organización de consumidores y usuarios proporciona un calendario de frutas y verduras de temporada en España. Puedes descargar el calendario en pdf o visitar las páginas del calendario. ● Puntos fuertes: Dispone de un buscador de alimentos. ● Puntos débiles: No dispone de mucha información del alimento. Ilustración 2-5 Pantalla Ocu 9 Soy de temporada Soy de temporada, es un proyecto web que se inició como un estudio de los alimentos en España, con análisis de datos tanto de los ministerios de agricultura como de las asociaciones del país para clarificar y reunir los calendarios de los alimentos de temporada del país. ● Puntos fuertes: Dispone de un fuerte análisis de los meses en los que un alimento es de temporada. ● Puntos débiles: La información del producto es pobre nutricionalmente hablando. Muestra características del cultivo. Ilustración 2-6 Pantalla Soy De Temporada Valor de nuestra aplicación Hemos querido reunir muchas funcionalidades que ya existen de una manera parecida en una sola web, teniendo un acceso único. De todo lo descrito en el 16 MySQL workbench Es una herramienta para el diseño de las bases de datos, para el sistema de base de datos MYSQL. Hemos utilizado esta herramienta para el desarrollo local como cliente MySQL. [10] Ilustración 3-8 Logo MYSql Workbench GitHub Es una plataforma para el desarrollo colaborativo, que utiliza un sistema de versiones. En esta plataforma hemos creado tres repositorios públicos alimenticiabackend, alimenticia-frontend y alimenticia-scraping para poder almacenar y gestionar el código de la aplicación, lo que nos ha facilitado a la hora de hacer un seguimiento de los cambios realizados. [11] Hemos decidido separarlos poque en el análisis previo del despliegue de la aplicación era recomendable tenerlos separados. 17 Ilustración 3-9 Logo Github Visual Studio Code Es un entorno de desarrollo de código abierto de Microsoft. Es liviano, ágil y se adapta muy bien a este tipo de desarrollos web ofreciendo muchas librerías de ayuda. [12] Ilustración 3-10 Logo Visual Studio Code Api de Google Maps y Places Es un servicio que proporciona Google para obtener ubicaciones o localizaciones. La hemos utilizado para obtener la lista de supermercados a través del código postal. En un primer lugar obtenemos un ratio del código postal que nos lo proporciona la api de Maps y con las coordenadas obteníamos el listado de supermercados a través de Places. [13] 18 Ilustración 3-11 Logo Google Maps APIs Open food Facts Es una aplicación donde puedes consultar la información nutricional de cualquier alimento o producto, tiene una api pública que hemos utilizado para nuestra sección de nutrición. [14] Ilustración 3-12 Logo Open Food Facts Fundamentos de desarrollo web utilizados Dentro del desarrollo web existen diferentes fundamentos que hacen que una aplicación o página web marque la diferencia y que hemos seguido en la mayor medida: • Uso de imágenes e iconos para comunicar. Hemos usado muchas imágenes de bancos de imágenes gratuitos e iconos para simplificar textos y que el usuario a golpe de vista sepa que es lo que está haciendo o viendo como mostramos en las siguientes ilustraciones. 19 Ilustración 3-13 Iconos de las características de un alimento de temporada Ilustración 3-14 Iconos que representan características de una receta • Color como elemento de diseño. Cuando creamos el logotipo para la aplicación, elegimos el verde por se un color representativo de las verduras y la alimentación sana. Con él hemos creado una paleta de colores primaria para toda la aplicación. Ilustración 3-15 Paleta de colores primarios Alimenticia Así los elementos principales de la aplicación como los botones, inputs, bordes, enlaces… llevan el color “corporativo”. 20 Ilustración 3-16 Color primario” corporativo” • Diseño responsive: Mobile first design Uno de los principales principios en el desarrollo web es el diseño responsive. Un mayor porcentaje de visualización de webs se hace vía móvil por lo que hemos querido desarrollar la aplicación bajo este principio. Mobile first design consiste en elaborar el diseño primero para móvil y hacerlo extensible para las demás interfaces como tabletas o pc. En ese sentido primero elaborábamos los estilos en el móvil y adaptábamos para los demás. Mostramos un ejemplo de código en la siguiente ilustración donde se ven todas las clases primero adaptadas al móvil y a continuación una query que marca la visualización a partir de las tablets. 21 Ilustración 3-17 Código First Mobile (1) Ilustración 3-18 Código First Mobile (2) Aquí mostramos alguna captura con el diseño para móvil comparado con pc: 22 Ilustración 3-19 Buscador en móvil (1) Ilustración 3-20 Buscador en móvil (2) Ilustración 3-21 Buscador en PC 23 • Simplificación del diseño Otro elemento importante ha sido la búsqueda en un diseño sencillo y simple. Haciendo uso de las herramientas y componentes que nos proporcionaba Angular Material [15] hemos elaborado interfaces simples. Scraping El scraping es una técnica para realizar la extracción de datos en las páginas web. Esta extracción de datos en nuestro caso tiene como objetivo la recopilación de los productos de los supermercados. Con ello realizamos un estudio del mercado comparando sus precios. Selección de supermercados: Para el desarrollo de la aplicación Alimenticia, se realizó un estudio previo para la elección de los supermercados que se incluirían en la aplicación. El estudio se realizó en base de varios criterios con el fin de transmitir una experiencia gratificante al usuario. Los supermercados elegidos son: Alcampo, Ahorramas, Dia y Eroski. El factor principal para determinar la inclusión de los supermercados ha sido la facili El factor principal para determinar la inclusión de los supermercados ha sido la facilidad y accesibilidad en la forma de poder acceder a los precios, nombre del producto, la imagen y si contiene oferta. Todos estos datos están expuestos de manera pública en sus respectivas páginas web Se estudió la posibilidad de incluir Mercadona, al ser uno de los supermercados con mayor cuota de mercado, pero decidimos que esta versión no incluirla ya que requiere un registro previo y esto podría suponer una dificultad añadida a la hora de hacer el scraping. Ilustración 3-22 Logo Supermercados 24 Entendemos que con estos 4 supermercados se cubre la necesidad de uno de los objetivos principales del proyecto que es proporcionar una comparativa de precios de diferentes productos de supermercado. Añadir más supermercados ha supuesto siempre una pequeña complicación, no en la extracción de datos si no en el posterior tratamiento para los algoritmos de comparación. La diferencia de criterio de los supermercados en cuanto a la asignación de los nombres para los productos y la asignación de los niveles de las categorías ha supuesto que tuviéramos que realizar un tratamiento a los datos extraídos. Por ejemplo, Al pack de latas los supermercados los nombran de diferente forma: ● Dia: Refresco de cola clásica Coca-Cola lata 12 x 33 cl. ● Ahorramas: Refresco cola Coca-Cola lata pack 12 33 cl. ● Eroski: Refresco de cola COCA COLA, pack 12x33 cl. ● Alcampo: COCA COLA ZERO Refresco de cola Zero azúcar pack 12 Uds. x 33 cl. Esto ha requerido una reformulación de los nombres ya que el algoritmo de comparación no respondía como queríamos así que como comentaban amos anteriormente hemos tratado los datos y se han unificado nombres, medidas, convirtiendo a minúsculas las marcas… mejorando considerablemente las comparaciones de texto. 25 Funcionalidad de la aplicación En este capítulo realizaremos una explicación sobre la funcionalidad de la aplicación, haciendo uso de los diferentes casos de uso generales que conforman la aplicación. ● Gestión de Usuarios ● Gestión de Comparador ● Gestión de Recetas ● Gestión de Dietética ● Gestión de Alimentos de Temporada De cada uno de ellos se va a explicar cómo se interpreta cada caso de uso en la aplicación. Actores Debemos distinguir dos tipos de usuarios, el usuario registrado que en los diagramas de caso de uso tendrá el nombre de actor, y el caso de los usuarios no registrados que tendrá el nombre de anónimo Gestión de usuarios Ilustración 4-1 Caso de Uso Gestión de Usuario(No Registrado) Ilustración 4-2 Caso de Uso Gestión de Usuario(Registrado) 32 Los usuarios pueden acceder al comparador a través del menú principal de navegación. Ilustración 4-14 Menú Comparador Selección de supermercado Para poder realizar una búsqueda de producto deberá ser seleccionado un supermercado. Existen dos maneras de elección del supermercado dependiendo del tipo de usuario: ● Usuario registrado: Al completar el registro, aparecerá una ventana modal para elegir el supermercado filtrado por los más cercanos según el código postal introducido en el registro. Si no existe algún supermercado de los definidos en la aplicación por la zona del código postal, éste podrá ser elegido igualmente. Ilustración 4-15 Selección Supermercado Usuario Registrado ● Usuario no registrado: Cuando el usuario no registrado accede al buscador de productos, aparecerá la ventana modal de los supermercados. En este caso sin la información de proximidad. 33 Ilustración 4-16 Selección Supermercado Usuario No Registrado Los usuarios podrán cambiar el supermercado elegido por defecto en la misma pantalla del supermercado. El usuario registrado también podrá cambiarlo en el menú de navegación, así como el código postal. Ilustración 4-17 Pantalla de Búsqueda en el Supermercado 34 Buscador El usuario podrá realizar una búsqueda de productos introduciendo un término en el formulario de búsqueda. Si la búsqueda ofrece resultados se mostrarán filtros por categorías y subcategorías de los productos. Ilustración 4-18 Búsqueda Productos Comparador El usuario podrá añadir productos a un carrito virtual o realizar una búsqueda de productos similares en las opciones de la ficha del producto. 35 Ilustración 4-19 Botón Añadir Producto y Botón Producto Similar Si el usuario elige la opción de producto similar, se le proporcionara un resultado de los diferentes supermercados con el precio de ese producto, para que pueda ver la diferencia. Si el precio es una oferta saldrá en rojo. 36 Ilustración 4-20 Resultado Producto Similar Carrito En el carrito saldrán los productos añadidos y el usuario podrá realizar diferentes acciones: ● El usuario podrá eliminar productos del carrito pulsando sobre la X que aparece colocada a la derecha del producto. ● El usuario podrá vaciar el carrito pulsando el botón con el icono de la papelera, situado abajo a la derecha. ● El usuario tendrá la opción de comparar dicha lista en otros supermercados pulsando el botón “comparador”. 37 ● El usuario podrá guardar el carrito pulsando el botón de guardado. Esta opción estará habilitada para usuarios registrados. Ilustración 4-21 Botones del Carrito Carritos guardados El usuario podrá acceder a sus listas de carritos guardados, mediante el menú de usuario o el propio perfil de usuario comentado anteriormente, en la gestión de usuarios. En el listado tendrá la opción de eliminar o descargar la lista en formato pdf. 38 Ilustración 4-22 Carritos Guardados Comparador En la página del comparador se mostrarán las listas de los supermercados con los productos similares a los que haya en el carrito. El precio se mostrará en verde si es el más barato y en rojo si es el más caro 39 Ilustración 4-23 Comparador de Listas 40 Ilustración 4-25 Caso de Uso Recetas Usuario No Registrado Gestión de recetas Los usuarios tendrán acceso a diferentes listados de recetas y aquellos que estén registrados tendrán el privilegio de poder crear recetas y realizar votaciones. Ilustración 4-26 Menú Recetas Ilustración 4-24 Caso de Uso Recetas Usuario Registrado 41 Listados Recetas Existirán varios listados de recetas, la página principal donde se mostrarán todas las recetas y diferentes listados de recetas favoritas, creadas por el usuario activo, de categorías, de usuario. Ilustración 4-27 Listado Recetas Por Defecto A los usuarios registrados se les mostrará un menú de acceso a listados y creación de recetas. 48 Se ha creado un estado de publicación para la receta. La receta podrá ser publicada si tiene tanto ingredientes como pasos, si no, no podrá ser publicada. Ilustración 4-37 Botón Publicación Receta La receta puede tener el estado de no publicada las cuales no les saldrán a los demás usuarios, pero sí al autor de la receta en otro color (verde clarito) diferente a las recetas publicadas. 49 Ilustración 4-38 Receta No Publicada 50 Modificar receta / eliminar receta Los usuarios que han creado una receta tendrán la opción de poder editarla representada por el icono de un lápiz y/ o de eliminarla representada con un icono de papelera. Ilustración 4-39 Botones de Eliminar y Modificar Receta Interacción recetas (favoritos y puntuación + comentario) El usuario autenticado tendrá opción de interactuar con las recetas dando favorito, puntuando la receta y/o añadiendo un comentario. Para añadir o quitar de favoritos una receta el usuario podrá hacerlo en las tarjetas de la receta de los listados pulsando el icono del corazón. 51 Ilustración 4-40 Botón Favoritos Receta El usuario autenticado podrá votar la receta accediendo al detalle de la misma, podrá valorar la receta y añadir un comentario que no es obligatorio. Si el usuario ya ha votado la receta le saldrá su votación y no podrá volver a votar. 52 Ilustración 4-41Votaciones Receta Gestión de dietética Ilustración 4-42 Caso de Uso Dietética Usuario Registrado/ Usuario No registrado El apartado de dietética consta de una página de información nutricional y otra de una calculadora de calorías recomendadas. Podemos acceder a dichas páginas a través del menú principal. 53 Buscar Información nutricional Ilustración 4-43 Menú Dietética-Información Nutricional El usuario realizará una búsqueda introduciendo un término en el formulario, si tiene éxito se mostrará los resultados relacionados con esa búsqueda. Los listados de los productos tendrán dos opciones: ● La información del producto, así como su valor nutricional Ilustración 4-44 Valor Nutricional ● La información nutricional del producto 54 Ilustración 4-45 Información Nutricional Calculadora Calorías Ilustración 4-46 Menú Dietética-Calculadora de calorías El usuario podrá realizar un cálculo de las calorías que deberá consumir conforme a diversos factores, como su sexo, altura, edad, peso y frecuencia de actividad física. Se realizará un cálculo y se informarán de las calorías que deberá consumir. 55 Ilustración 4-47 Calculadora de Calorías 56 Gestión de alimentos de temporada Ilustración 4-48 Caso de uso Alimentos de Temporada Usuario Registrado/ Usuario No Registrado Los usuarios tendrán acceso a un apartado de alimentos de temporada a través del menú de navegación. Ilustración 4-49 Menú Alimentos de Temporada 57 Listado Se mostrará un listado con todos los productos donde se mostrarán con color los alimentos que estén en temporada, semitransparentes los alimentos que están entrando o saliendo de temporada y en gris los alimentos que no están de temporada. El usuario podrá filtrar los alimentos por meses o por categoría. La página siempre se inicia con el mes actual. Ilustración 4-50 Listado Alimentos Temporada 64 Ilustración 5-5 Estructura de carpetas del módulo de Componentes ○ guards: Los guards [19] en Angular son un elemento de seguridad y protección de vistas que proporciona angular. En nuestro caso las utilizamos para dar o no acceso a los usuarios dependiendo si son anónimos o autenticados. ○ interfaces: Este directorio contiene las diferentes interfaces comunes independientes a los módulos que pueden definir algún modelo necesario para la aplicación. ○ pipes: Las pipes [20] de Angular son funcionalidad para transformar datos. En nuestro caso definimos algunos pipes custom para el tratamiento de cadenas de texto que no proporcionaba el core de Angular. ○ service: Directorio con servicios generales. Por ejemplo, un servicio que hemos definido para proporcionar el listado por default de los supermercados o de las categorías de dificultad de la receta. ○ shared: En este directorio se introducen directivas [21] comunes a la aplicación. ○ componente app: Es el componente raíz y principal de la aplicación donde está definido el router outlet de angular. El router outlet es el 65 componente donde se inyectan los demás componentes de la aplicación. ● assets: Contiene las imágenes de la aplicación y archivos necesarios. ● Environments: Se encuentran las configuraciones y variables de entorno. ● favicon: El archivo del icono del proyecto. ● index.html: Archivo de la página principal del proyecto. ● main.ts: Es el archivo TypeScript inicial del proyecto donde aplican las configuraciones globales del proyecto. Los demás archivos son propios del proyecto y donde se realizan configuraciones tanto del editor, de git, la configuración de angular etc. Estructura del backend En el desarrollo local se ha desplegado el servidor en el puerto 3007 dentro del contenedor Docker. Se ha seguido el patrón modelo-controlador con una separación de responsabilidades. Explicaremos continuación dos de las funcionalidades clave que realizamos en el servidor: la comparación de productos y la autenticación por token. Comparación de productos La comparación de productos de supermercado comienza con la creación de un modelo “Producto” donde guardamos la información de los datos sacados de los supermercados. En el siguiente apartado de las bases de datos se explica cómo está construida la tabla contiene los campos del modelo. Dos de esos campos son clave para el proceso de comparación: la marca y el nombre. Para entender el proceso primero explicaremos cómo funciona algoritmo de comparación. Apoyados en la librería string-similarity lo que hacemos es comparar el nombre del producto palabra por palabra hasta encontrar cadenas similares devolviendo un numero entre 0 y 1. Cuanto más cerca del uno, más palabras iguales habrá encontrado entre dos cadenas de palabras dadas, en nuestro caso los nombres. 66 El hecho de tener que modificar las cadenas de los supermercados y adaptarlas entre cada uno de ellos fue en parte por este tipo de algoritmo porque se daba el caso que palabras muy parecidas las hacía match y el resultado no era el esperado. Explicado el funcionamiento de como encontrar nombres similares, para acotar más las posibilidades de éxito lo que hacemos primero es comparar las marcas. Si el producto tiene la misma marca, buscamos en ese sentido y las posibilidades aumentan. Si no, directamente comparamos el nombre. Podríamos involucrar las propias categorías de los productos, pero volveríamos al mismo problema comentado con los nombres, tendríamos que unificar criterios. Hemos establecido un mínimo para cuando se hace match con la marca de 0.55 lo cual es un alto porcentaje, diferente de cuando no es la misma marca que lo bajamos a 0.45 ya que así podemos encontrar productos más variados, pero con el hándicap de que a veces nos encontramos productos que no tienen nada que ver. Vamos guardando el valor más alto encontrado tanto del producto con la misma marca, si lo tiene, como del producto con distinta marca. A continuación, mostramos parte del código donde se ve lo explicado anteriormente. Ilustración 5-6 Parte del código de comparación de productos Autenticación por Token Como hemos comentado anteriormente hemos realizado una autenticación por token (JWT). Esto consiste en proporcionar un token al usuario al iniciar sesión para 67 permitir realizar solicitudes al servidor desde el frontend y se devuelvan los datos. En esta parte, si las cabeceras de la petición traen el token, a través de un middleware, permitirá el acceso a la petición. Aquí mostramos partes del código del servidor involucradas en esta funcionalidad: Ilustración 5-7 Login de usuario y generación de token Ilustración 5-8 Verificación del token 68 Ilustración 5-9 Middleware de autenticación de un usuario Directorios A continuación, mostramos los directorios del backend Ilustración 5-10 Estructura de carpetas Backend 69 ● controllers: Directorio con los controladores de la aplicación donde se realiza la lógica. ● dist: Directorio donde se alberga la build de la aplicación. ● models: Directorio donde definimos los modelos con Sequelize. ● node_modules: Contiene todas las dependencias de nuestro proyecto. ● public: Directorio con los archivos públicos del servidor. Donde se suben las imágenes, archivos, etc. ● routers: Directorio que contiene las rutas de la aplicación. ● utils: Archivo con middlewares generales, servicios y archivos de configuración. En la raíz del backend nos podemos encontrar con archivos de configuración, el archivo de las variables de entorno y dos archivos importantes: ● app.js: Este es el archivo principal de la aplicación. El entry point donde se inicia el servidor, dónde se importan las librerías principales y se declaran las rutas. ● config.js: En ese archivo se realiza la conexión a la base de datos. Estructura del Scraping. ● Scraping: en esta carpeta este contenido la lógica para hacer el Web Scraping en los diferentes supermercados. Ilustración 5-11 Estructura de carpetas Scraping Para desarrollar los scripts de los scraping, realizamos un breve estudio de cómo estaban estructuradas las diferentes webs, de los supermercados que tratamos. Con ese 70 previo estudio, identificamos si las webs contienen cargas dinámicas o no, y como se estructuran los datos que queremos obtener. Para el desarrollo de los scripts de scraping, se crea un axio que es una herramienta de JavaScript, para enviar solicitudes HTTP, en el creamos una cabecera de navegador para poder enviar peticiones a las webs de los supermercados para evitar ser identificados como un robot. Ilustración 5-12 Fragmento Código Scraping Axios Cada script tiene un formato diferente, ya que cada web tiene las etiquetas de los nombres, precios, imágenes, categorías de los productos, identificadas de diferente forma. En algunos casos hemos creado una función que imita el scroll que se haría en una web como en los casos de Dia, Eroski y Alcampo, este último identificamos que los productos se cargan de forma dinámica y lo que realizamos es dentro de la función del scroll la recopilación de datos, ya que identificamos que cuando se hace scroll en la página desaparecen los datos conforme la visualización que se mostraba. 71 Ilustración 5-13 Fragmento de Código scraping AutoScroll También en uno de los scripts tenemos la interpretación de pulsar el botón de mostrar más resultados, en este caso para el Ahorramas. Se realiza a través del querySelector que lo que realiza es buscar en la página el botón de más resultado, que tiene la etiqueta: show-more button-more. Ilustración 5-14 Fragmento de Código “Botón Mas Resultados” 72 Todos esos scripts una vez que han recopilado los datos los van insertando en una base de datos. Cuando se han realizado las inserciones en dicha base de datos, todos esos datos se exportan a la base de datos de alimenticia, pero con una previa modificación. Esta previa modificación consiste en que, los nombres de los productos extraídos de los supermercados son diferentes, aunque se trate del mismo producto, con ello nos dimos cuenta de que al realizar la comparación no lo hacía correctamente. Por tanto, realizamos una maquetación previa de los nombres como se muestra en la siguiente imagen. Ilustración 5-9 Fragmento de Código scraping AutoScroll Antes de insertarlos en la base de datos de Alimenticia, abreviamos todas las unidades de medida que pueda haber, las separamos de sus dígitos, unificamos todos los decímales y unificamos la manera de nombrar los packs. 73 Estructura de la base de datos de la aplicación web En este apartado explicaremos cómo está estructurada la base de datos de nuestra aplicación punto explicaremos las dos bases de datos de las que disponemos una para el scraping y otra para la aplicación general. Para la aplicación general, Alimenticia. Ésta contendrá toda la información de la aplicación para realizar su correcto funcionamiento, como los usuarios, las recetas, los alimentos de temporada y los productos modificados de los supermercados. La otra base de datos llamada ScrappingAlimenticia, contendrá todos los productos de los supermercados en bruto. Base de datos: Alimenticia Para la creación de las tablas de Alimenticia nos hemos apoyado en la librería Sequelize para NodeJs que como hemos explicado anteriormente es un ORM para base de datos relacionales. Hemos definido los siguientes modelos: ● Alimento ● Almacenaje ● Beneficio ● CategoriaAlimento ● CategoriaReceta ● Compra ● Producto ● Valoracion ● Receta ● Seleccion ● Temporada ● Usuario 80 ScrappingAlimenticia Ilustración 6-3 Estructura Base de Datos scraping Alimenticia Estará compuesta por cuatro tablas con los siguientes nombres, estas tablas contendrán los productos de los supermercados: ● productos_dia: contendrá los productos pertenecientes al supermercado día. ● productos_ahorramas: contendrá los productos pertenecientes al supermercado Ahorramas. ● productos_eroski: contendrá los productos pertenecientes al supermercado Eroski. ● productos_alcampo: contendrá los productos pertenecientes al supermercado Alcampo. Todas estas tablas contienen esta estructura: ● id: clave primaria de las tablas anteriores. ● id_producto: identificador de cada uno de los productos de los supermercados. ● También contiene la información del nombre y la imagen. ● precioNormal: es del tipo decimal, contiene el precio que tiene el producto. 81 ● precioOferta: es del tipo decimal, contiene el precio en oferta que tiene el producto. ● marca: Indica la marca del producto. ● supermercado: Indica el supermercado que pertenece el producto, si es del Eroski, Ahorramas, día o Alcampo ● También contine estos atributos categoriaSuper1, categoriaSuper2 y categoriaSuper3, que guardan la categoría principal del producto, su subcategoría principal y si tiene subcategorías. 82 83 Conclusiones y trabajos futuros Conclusiones del trabajo La realización del proyecto nos ha permitido evolucionar en el desarrollo web. Los dos integrantes del equipo trabajamos en este ámbito y haber planteado la realización del proyecto con unas tecnologías que no usamos en el día a día como puede ser Angular y NodeJs, para nosotros ha sido de una lección en adaptabilidad y aprendizaje, además de una motivación para aprender diferentes tecnologías. Se ha podido cumplir con las expectativas marcadas al principio, realizando un análisis y trabajo minucioso de Web scraping, con todas las complicaciones que ello ha llevado y ralentizando en ocasiones el desarrollo, como el cambio de web en el supermercado día una vez realizado el primer scrapeado teniendo que volver a desarrollarlo. Aun así, hemos conseguido finalmente una comparación de productos entre supermercados con un alto porcentaje de acierto y ese era uno de nuestros principales objetivos. Además, hemos realizado una aplicación intuitiva y rápida aunando mucha funcionalidad que pensamos que es muy provechosa para la gente. Podemos concluir que hemos cumplido con el objetivo propuesto inicialmente en el proyecto, aportando un valor diferencial con las diferentes aplicaciones que puede haber online, como es la comparativa de productos de supermercado. Nos queda la espina de no haber podido realizar al completo el apartado de dietas, ya que una de las ideas iniciales es que los usuarios pudieran realizar dietas en base a productos. Limitaciones En un ámbito en el que se depende de terceros como son productos de supermercados y no disponer de Apis públicas o de pago, el mantenimiento de la aplicación es bastante importante de cara al futuro de la aplicación. El hecho de 84 depender de scrapear páginas y que estás pudieran cambiar, como así ha pasado durante el proyecto, exige dar servicio constante. Líneas de trabajo futuro. Durante el desarrollo del proyecto hemos ido viendo diferentes áreas que pueden potenciar nuestra aplicación, como por ejemplo de usar inteligencia artificial en nuestros algoritmos de comparación que no podría ayudar en llegar a un 100% de acierto y dar un mejor resultado. Algunas líneas para implementar en un futuro son la creación de tareas automáticas, como el scrapeado de datos y su posterior transformación. Esto nos ayudaría en una correcta actualización de datos de forma automática. También una de las ideas que nos surgieron durante el proyecto es dar soporte de suscripción a los alimentos de temporada. La gente recibiría alertas en los cambios de mes, pudiendo observar que productos están de temporada. Compartir recetas por redes sociales, WhatsApp o correo electrónico es otra de las líneas que nos gustaría implementar para ofrecer al usuario funcionalidades actuales de compartir. 85 Introduction Today, the economic situation we live in has created the need for many families to save on their daily expenses. The fact that there is often not enough time to organize leads to excessive consumption and unnecessary spending. Many families have had to adjust their budgets and seek solutions to reduce expenses and optimize shopping more efficiently. In this context, the idea of developing a web application that facilitates these tasks for people has emerged. The document will cover the preliminary study and the value our application provides (Chapter 2), the tools and technologies used (Chapter 3) for project development, as well as the functionality and architecture of the application components (Chapters 4, 5, and 6). Finally, we will present conclusions and future directions (Chapter 7). Motivation Have we ever stopped to compare different prices for the same product across various supermarkets? Often, while shopping, we wonder if a product would be cheaper in another supermarket or if it’s on sale. Alimenticia can be your great ally when making purchases or tracking different products to find the best deals. Additionally, when we prepare a recipe or come across one in a platform, magazine, or television, we often wonder how much that recipe would cost. Alimenticia also provides the option to add the ingredients from a recipe and calculate the cost based on that. Furthermore, when we visit the supermarket, we sometimes don’t know which products are in season. As a result, we may end up buying foods that, although available in the supermarket, are priced higher than during other months. Alimenticia gathers information about fruits and vegetables, indicating which months they are in season or when they are going in or out of season 86 Goals The main objective of this project is to develop a web application that assists users in easily and conveniently obtaining supermarket product prices without having to access each corresponding page individually. This allows users to compare products and decide where to make their purchases. The application also provides features such as creating a personal or community recipe book and calculating the total price of a recipe. Another goal of this project is to determine which months the main foods we consume are in season. To achieve these objectives, the following steps have been taken: • Analyzing other applications related to ours. • Studying and applying web scraping techniques for automatic extraction of data and product prices from supermarket pages. • Utilizing public data and APIs to enhance the application’s functionality as much as possible. • Developing and implementing features, including user registration, comparison algorithms, and database management for smooth platform operation. • Creating documentation that explains the creation process and development of the application. Work plan To achieve the project objectives, we have organized the process into several phases, each adapted to help us reach our proposed goals: • Research and Analysis: o Investigate and analyze the main approaches for application development. o Study the services or tools needed for development and integration with the chosen technologies. 87 o Search for publicly available data sources (such as food databases, nutrition information, logos, image banks, and icons). o Research web scraping techniques. o Examine other similar applications. • Design and Structure: o Create the application’s views (user interfaces). o Define the application’s models (data structures). • Development and Implementation: o Perform web scraping and integrate the data with our database. o Implement the proposed use cases. • Testing, Documentation, and Delivery: o Prepare comprehensive documentation covering all aspects of the development process. Conclusions and future work Conclusions The completion of the project has allowed us to evolve in web development. Both team members work in this field, and proposing the project using technologies we don’t use in our day-to-day work, such as Angular and Node.js, has been a lesson in adaptability and learning for us. It has also motivated us to explore different technologies. We managed to meet the expectations set at the beginning by conducting thorough web scraping analysis and work. Despite the complications and occasional slowdowns due to changes in supermarket websites (such as the need to redevelop after the initial scraping), we ultimately achieved a successful product comparison between supermarkets, which was one of our main objectives. 88 Additionally, we created an intuitive and fast application that combines many useful features for users. In summary, we fulfilled the initial project objective, providing a unique value compared to other online applications, such as supermarket product comparison. However, we regret not being able to fully implement the dietary section. One of our initial ideas was to allow users to create diets based on products. Limitations In a context where one relies on third-party products such as supermarket items and does not have access to public or paid APIs, maintaining the application is quite important for its future. Depending on web scraping and the possibility of pages changing, as has happened during the project, requires constant service. Future Work During the project development, we have identified different areas that could enhance our application. For example, using artificial intelligence in our comparison algorithms could help achieve better accuracy and results. Some future implementation ideas include creating automated tasks, such as data scraping and transformation, to ensure proper data updates automatically. Additionally, providing subscription support for seasonal foods, where users receive alerts during month changes to see which products are in season, is another feature we’d like to implement. Sharing recipes via social media, WhatsApp, or email is also on our list to offer users current sharing capabilities. 89 Contribuciones Personales Para la realización de este proyecto nos hemos organizado de forma continua en la mayoría del tiempo que ha durado el proyecto. El primer tercio cada uno hizo un análisis de todo el proyecto y de los casos que consideramos importantes (tecnologías, web scraping, aplicaciones del mercado). Conjuntamente investigamos cómo y dónde podríamos desplegar la aplicación en la web. También hicimos la búsqueda de información de los alimentos de temporada, así como los assets de manera conjunta sin tener en cuenta la cantidad que cada uno recogía. Una vez comenzamos con el desarrollo, nos reuníamos para analizar el caso de uso y empezar el desarrollo conjuntamente. Se puede decir que para la mayoría del desarrollo hemos usado una técnica llamada pair programing. [22] A continuación, explicaremos que partes ha podido realizar cada alumno de forma individual Jesús Velez Ayuso • Estudio previo de las tecnologías a utilizar. Drupal y Laravel siempre estuvieron en la cabeza por los conocimientos en php que tenemos, pero al final nos decidimos por Angular, ya que no necesitábamos un CMS tan potente para desarrollar la aplicación y Angular suponía un desafío para nosotros al tener que desarrollar una aplicación diferente y al final nos decidimos por Angular, invirtió el tiempo en conocer este lenguaje de programación, aunque David ya disponía de ciertos conocimientos. También Investigó como montar un Docker con MySQL, angular y node para el desarrollo local. • Web Scraping Análisis de los nombres de los supermercados, así como sus categorías para su 96 Ilustración B-0-3 Detalle alimento buscado 97 Ilustración B-0-4 Listado receta 98 Ilustración B-0-5 Detalle de la receta 99 Ilustración B-0-6 Información nutricional de alimento 100 Ilustración B-0-7 Calculadora de calorías 101 Ilustración B-0-8 Alimentos de temporada 102 Ilustración B-0-9 Alimento de temporada Adjuntamos también un pdf a un drive donde completamos todas las interfaces que hicimos inicialmente: • https://drive.google.com/file/d/1VK2IS43mWeqkZ0vNRzWNgiUYbyYfP1xZ/v iew?usp=sharing 103 Apéndice C - Bibliografía alimentos de temporada Adjuntamos un pdf con las páginas web donde fuimos recopilando toda la información de los alimentos que aparecen en el apartado de alimentos de temporada (No hemos querido mostrar los enlaces en la memoria porque son 15 páginas de enlaces) Adjuntamos capturas y el enlace al drive privado accesible con enlace: • https://drive.google.com/file/d/1HkRiL1e8FFckh3xtLUi6oh8jS8mZsKVE/view ?usp=sharing Ilustración C-0-10 Bibliografía de alimentos de temporada