Daily Tuppers, aplicación web responsive de recetas de tuppers

Asignatura: Trabajo Final de Grado (especialidad: Ingeniería Web)
Grado: Multimedia
Nombre del estudiante: Laura Fernández Mingote
Consultor y profesor: Jordi Ustrell Garrigos y Carlos Casado Martínez

Introducción

Hoy cada vez son más las personas que trabajan lejos de casa y tienen que pensar cada noche qué comerán al día siguiente y, como consecuencia, invertir parte de su tiempo en pensar qué cocinar y, sobre todo, hacerlo.

Yo soy una de estas personas, y más de una vez he pensado que me iría muy bien ir apuntando en algún sitio los táperes que he ido haciendo, con el objetivo de, si un día no estoy inspirada y no se me ocurre qué cocinar (cosa que me pasa muy a menudo), poder consultar mi lista de táperes y no perder tiempo, ya que si algo no me sobra es el tiempo…

En otras ocasiones no se tiene tiempo de ir a comprar, o se compran alimentos que después no se sabe qué cocinar con ellos, así que consideré interesante que también sería útil disponer de una herramienta en la que, introduciendo los ingredientes que se tienen en casa, te sugiriera recetas elaboradas con esos ingredientes.

En definitiva, este trabajo final de grado nace con el objetivo de crear una aplicación web adaptativa en la que los usuarios puedan tener un espacio en el que almacenar sus propias recetas de táperes, compartirlas y consultar las de otros usuarios y así facilitarles su día a día.

Etapas y retos

El proceso de desarrollo de este proyecto se ha dividido en cuatro fases:

Estudio de mercado, definición y alcance

La idea ya la tenía en mente desde hacía un par de años, ya que me encuentro todos los días con el mismo problema: pensar qué táper preparar para el día siguiente. Así pues, lo primero que hice fue analizar las aplicaciones ya existentes y las funcionalidades que ofrecían. Una vez hecho esto, procedí a definir las funcionalidades básicas que sí o sí quería que mi aplicación ofreciera, con el objetivo de poder utilizarla en la vida real. Esta lista la realicé partiendo como base de lo que me gustaba de las aplicaciones analizadas y, además, añadí otras funcionalidades que yo consideraba necesarias.

Modelos alámbricos (Wireframes)

Una de las etapas más importantes del proyecto ha sido la creación de los prototipos. He pasado muchas noches con papel y bolígrafo en mano dibujando diferentes formas de estructurar la aplicación y, una vez lo tuve más o menos claro, me puse a realizar los modelos alámbricos con un programa que me recomendaron en el trabajo y que he considerado muy completo y fácil de utilizar: Axure RP. Esta herramienta ofrece al usuario un mes de prueba gratuito y, además, permite subir a su servidor una versión interactiva en línea de los modelos alámbricos.

Esta es la versión en línea de Daily Tuppers: https://t30dbx.axshare.com 

(contraseña: uoctfg)

Maquetación y diseño

Esta etapa también ha sido clave, ya que es cuando he empezado a obtener los primeros resultados y una versión real de la aplicación, lo cual es motivador. La maquetación está realizada con Bootstrap 4, un entorno de trabajo (framework) pensado para crear aplicaciones web adaptativas y multidispositivo. No es difícil de utilizar, pero para mí la dificultad estuvo en cambiar el chip y maquetar pensando primero en la vista móvil y luego en el escritorio, ya que Bootstrap se basa en la filosofía «móvil primero». Una vez superado esto, fue muy divertido y entretenido crear las diferentes pantallas. Además, aproveché para crear las maquetas utilizando el motor de plantillas Twig, con el objetivo de hacer una integración más rápida con Symfony una vez llegara el momento de desarrollar.

En cuanto al diseño, tenía las ideas bastante claras sobre el estilo de aplicación que quería y, en un principio, no le di mucha importancia, ya que soy demasiado perfeccionista y siempre se me va mucho tiempo con estos pequeños detalles y luego tengo que correr. Por eso, primero decidí hacer los modelos alámbricos, seguidamente la maquetación y, una vez tuve una visión realista de la aplicación, ya me puse a pensar en los colores y a aplicarlos directamente sobre la maqueta. Debo decir que a mí siempre me ha costado combinar colores, y suelo utilizar la misma combinación: rojos-blancos-negros o blancos-azules-grises, pero —como bien me aconsejó una compañera diseñadora— «Cuando hablamos de táperes, recetas, alimentos, estos transmiten al usuario el concepto de saludable, y es mejor que utilices colores como el verde, blanco, etc.»; seguí su consejo, y tenía razón...

Desarrollo

Esta fue la «gran etapa», la más divertida y con la que más disfruté y aprendí. Como llevo muchos años programando en PHP, tenía claro que el proyecto lo quería desarrollar en este lenguaje, pero no podía ser todo tan fácil, así que decidí aventurarme y utilizar un entorno de trabajo con el que nunca había trabajado: Symfony. ¡La experiencia ha sido muy positiva!

Lo que más me ha gustado de Symfony ha sido, en primer lugar, lo fácil que es instalar componentes a medida que se van necesitando gracias a Composer, un gestor de dependencias.

En segundo lugar, su escalabilidad, que permite segmentar el código en bundles para que el proyecto pueda seguir creciendo. Los bundles son paquetes que encapsulan funcionalidades, permiten reutilizarlas y mantenerlas independientes del resto del código.

Los bundles que he utilizado han sido:

• DoctrineFixturesBundle: Útil para generar datos de prueba en la base de datos.

• FOSUserBundle: Útil para gestionar la seguridad de la aplicación, pues ofrece la gestión de los usuarios y las diferentes pantallas de registro, inicio de sesión, etc.

• Slugify: Librería para generar slugs.

Por último, Symfony permite al programador ahorrar mucho trabajo con determinadas tareas, como por ejemplo la creación de formularios, las validaciones o los tratamientos con la base de datos; pero esta ventaja también puede suponer un problema para una persona inexperta y novata con este entorno de trabajo, como lo he sido yo.

De todo lo que he tenido que aprender sobre Symfony y sus componentes, lo que más quebraderos de cabeza me ha dado ha sido:

• Doctrine: Me ha costado entender cómo funcionaban las anotaciones y cómo se creaban las relaciones entre las entidades. Al final lo acabé solucionando con la ayuda de la documentación de Doctrine y realizando pruebas hasta que conseguí el resultado esperado.

• Formularios: Ha sido la tarea más compleja y a la que he tenido que dedicar más tiempo, sobre todo a la hora de manejar las relaciones de muchos a muchos. De todas formas, también debo decir que, una vez tenía creado el formulario de «creación de táper», en el formulario de «editar táper» tuve que hacer muy pocas modificaciones, ya que, al ser tan modular, mucho código se puede reutilizar, con lo que se respeta el principio de «Don’t Repeat Yourself» (DRY).

• Componente de seguridad FOSUserBundle: Muchas veces, aunque reutilicemos componentes o funcionalidades ya existentes, nunca se adaptan al 100 % a nuestro proyecto, y necesitamos realizar alguna modificación para que acaben de encajar. Symfony y la mayoría de los bundles trabajan con eventos, pero al haber utilizado una versión nueva de Symfony, este bundle todavía no estaba actualizado para que fuera 100 % compatible, y ahí llegó mi problema. A la hora de querer modificar el bundle, este no disponía de eventos en los lugares donde yo quería realizar las modificaciones, así que para solucionarlo tuve que recurrir a la herencia para poder adaptar las funcionalidades a mis necesidades.

Conclusiones

En conclusión, antes de empezar a desarrollar el proyecto con Symfony, sinceramente, tenía miedo, ya que siempre había leído por internet que la curva de aprendizaje era bastante elevada y, en un primer momento, no descarté la opción de realizarlo con otro entorno de trabajo con el que ya había trabajado previamente, pero decidí arriesgarme. Para mi sorpresa, alegría y satisfacción: ¡conseguí desarrollar el proyecto con Symfony hasta el final!

La realización del proyecto ha sido una experiencia muy positiva, tanto personal como profesionalmente, y creo que tomar la decisión de utilizar tecnologías que nunca había tocado fue la mejor decisión que podía haber tomado. Por un lado, me llevo la satisfacción de haber sido capaz de desarrollar el proyecto con Symfony y haberlo podido finalizar, ya que, con esfuerzo y muchas horas de dedicación, es posible aprender cualquier cosa.

Por otro lado, la experiencia de utilizar Bootstrap ha sido muy buena, ya que hacía años que no maquetaba, y nunca había tocado el tema de los estilos adaptativos, pero una vez le coges el ritmo es bastante sencillo y entretenido de hacer. En cuanto a Symfony, facilita mucho la vida al desarrollador con los componentes que ofrece e incluye, aunque también se la complica en algunos aspectos, por ejemplo, como me pasó a mí, con los formularios. En resumen, estoy superorgullosa con el resultado final y contenta de haber disfrutado y aprendido tanto.

Si queréis saber más sobre el proyecto, lo tenéis disponible en el siguiente enlace: http://hdl.handle.net/10609/95226.

Enlaces relacionados:

• Maqueta publicada en Axure: https://t30dbx.axshare.com
• Contenido del proyecto en el repositorio de la UOC: http://hdl.handle.net/10609/95226

Documentación:

• Axure RP: herramienta para diseñar wireframes y prototipos <https://www.axure.com/>.
• Bootstrap 4: framework para construir sites mobile-first y responsive <https://getbootstrap.com/docs/4.0/getting-started/introduction/>.
• Twig: motor de plantillas para PHP <https://twig.symfony.com/>.
• ¿Qué es Twig? <https://es.wikipedia.org/wiki/Twig_(motor_de_plantillas)>.
• ¿Qué es Symfony? <https://symfony.com/what-is-symfony>.
• ¿Qué es Composer? <https://getcomposer.org/doc/00-intro.md>.
• ¿Qué son los Bundles de Symfony? <https://www.drauta.com/que-son-los-bundles-de-symfony>.
• Bundle DoctrineFixturesBundle <https://symfony.com/doc/master/bundles/DoctrineFixturesBundle/index.html>.
• Bundle FosUserBundle <https://symfony.com/doc/current/bundles/FOSUserBundle/index.html>.
• Bundle Slugify <https://packagist.org/packages/cocur/slugify>.

Cita recomendada: FERNÁNDEZ MINGUOTE, Laura. Daily Tuppers, aplicación web responsive de recetas de tuppers. Mosaic [en línea], julio 2019, no. 173. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n173.1941.