Desarrollo de una Aplicación Web de Recetas de Cocina

Máster en desarrollo de Aplicaciones y Servicios Web

Ingeniería de Software

Actividad 2

Integrantes.

➢ José Luis Murillo Constante

➢ Jhoan Andres Rativa Leiva
➢ Jonatan López Saberbein
Índice

Introducción ............................................................................................................................................ 3
Objetivo................................................................................................................................................... 4
Descripción del caso................................................................................................................................ 5
Desarrollo Actividad ................................................................................................................................ 6
Registrar el usuario a la plataforma de la AIC ..................................................................................... 6
Autenticar usuario al ingresar a la aplicación de la AIC. ..................................................................... 9
Cargar la receta, con todos sus aspectos asociados (categoría, lista de ingredientes,
procedimiento, dificultad, costo, etc.) .............................................................................................. 12
Buscar recetas en base a distintos aspectos: clase de receta, tipo de ingrediente de base, nivel de
dificultad, costo de la receta. ............................................................................................................ 15
Visualizar resultados de búsqueda ................................................................................................... 18
Visualizar la información sobre cada receta ..................................................................................... 20
Compartir la receta en las Redes ...................................................................................................... 22
Valorar receta (de 1 a 5 estrellas) ..................................................................................................... 25
Conclusiones ......................................................................................................................................... 28
Bibliografía ............................................................................................................................................ 29
Introducción
Las metodologías de desarrollo de software son un marco de trabajo eficiente que surgió en
la década de los 70 y en la actualidad ofrecen una respuesta a los problemas que se tenía en
los antiguos métodos de desarrollo en la actualidad se han ido desarrollando aplicaciones de
todo tipo las cuales permiten al usuario estar más al tanto en conocimientos a nivel de
ciencias, tecnología, cocina, medicina todo esto ha desarrollado el mundo de la investigación
pasando de una biblioteca o coleccionar libros de forma física de diferentes disciplinas a tener
a nuestra disponibilidad la información en todo momento con tan solo hacer una búsqueda
en lo que ahora se conoce como internet no solo brindando información en texto, a esto se
agregan videos, blogs, y aplicaciones que contienen información de interés para el usuario.
(Ríos, 2017)
En el presente informe se va a desarrollar una aplicación que contiene recetas las cuales
ayudaran a usuarios a compartir sus experiencias culinarias y servir a otras con el
conocimiento compartido que dará la app, dado que el desarrollo de sistemas es una actividad
humana hay muchas posibilidades de cometer errores en cualquier etapa del proceso por lo
cual se procederá con el paradigma de modelado UML(Lenguaje Unificado de Modelado)
para dar mayor entendimiento al cliente sobre los requerimientos que serán plasmados en la
app web y llegar a un acuerdo entre el desarrollador y la Asociación Internacional de Chefs,
la clave está en organizar el proceso de diseño tal que el cliente, desarrolladores y otras
personas involucradas en el desarrollo del sistema lo comprendan, el UML proporcionara tal
organización en el presente proyecto. (Schmuller, 1997)
Las funcionalidades requeridas por el cliente serán tratados según el diseño orientado al
usuario y se transformará la funcionalidad en un requerimiento que mediante el caso de uso
donde se hará una descripción de las acciones del sistema desde el punto de vista del usuario
mediante una técnica de aciertos y errores se utilizará la herramienta MagicDrawn v17.0.4
para el diseño de esquema del caso de uso para cada requerimiento. (Schmuller, 1997)
Además, se tratan los requisitos de datos, transaccionales y diseño en base de un boceto de
la interfaz de usuario para una mayor compresión se hace uso de Balsamiq que es un
software de wireframing rápida de creación de tramas de interfaz de baja fidelidad estándar
para dar una mejor experiencia de usuario y finalmente generar más ideas para que se pueda
descartar las malas y descubrir las mejores soluciones. (Balsamiq, 2022)
Objetivo

Este documento es la memoria del caso Asociación Internacional de Chefs (AIC), que hemos
desarrollado como proyecto práctico de la asignatura Ingeniería Software Web. El proyecto
tiene como objetivo desarrollar un sistema que permita a los usuarios consolidar recetas
culinarias, buscar recetas, valorar recetas y compartir recetas por la red.
Descripción del caso

La Asociación Internacional de Chefs (AIC) ha decidido desarrollar una aplicación (en

ambiente Web) que consolide recetas culinarias. Consideran que cualquier usuario
(registrado) podrá ingresar recetas, y en cada una de ellas se deben incluir los ingredientes
y el procedimiento. La AIC espera, además, que cualquier usuario que utilice esta aplicación
pueda opinar valorando las recetas. Adicionalmente, cualquier usuario podrá compartir las
recetas en las redes. Respecto a los ingredientes, la AIC espera que los usuarios puedan
buscar el (los) ingrediente(s) básico(s) necesario(s) para cada receta. Respecto al
procedimiento (proceso para lograr cada producto), los usuarios registrados deben tener
disponible aquellos mecanismos para incorporar imágenes y videos asociados al proceso de
elaboración de sus productos. La AIC los está contratando para que desarrollen ese sistema
interactivo, de manera que pueda ser utilizado por personas adultas en toda Europa y
América. En esta actividad seguirán el método de Diseño Centrado en el Usuario, para lograr
una aplicación para que los usuarios registrados puedan publicar sus recetas, y cualquier otro
usuario (no necesariamente registrado) pueda buscar recetas (haciendo uso de distintas
estrategias y considerando las características de las mismas, por ejemplo, los ingredientes)
y de esa forma “recuperan” las recetas, las valoran y compartan en las redes. Las recetas
estarán clasificadas según las siguientes categorías: [ Entradas y antipastos, primeros platos,
segundos platos, ensaladas y contornos, postres]. Además, cada receta tendrá indicado el
nivel de dificultad y el costo de preparación (por los ingredientes y anexos). Respecto a los
ingredientes de base, se utilizará la siguiente clasificación: [Aves, carnes, frutos del mar y
pescados, arroces, huevos, pastas, pizzas, verduras y hortalizas, legumbres y frutos secos,
frutas], entre otros (pueden agregar, libremente, más categorías).
Desarrollo Actividad

Registrar el usuario a la plataforma de la AIC

La empresa AIC desea una funcionalidad de registro para usuarios que sean mayor de edad
y pertenecientes a los continentes de Europa y América.

Descripción del caso uso

ID: CU01 Fecha de creación: 17/05/2022

Nombre: Registrar usuario Fecha de revisión: 19/05/2022

Autores: Jonatan López, Jhoan Rativa y Fecha de aprobación: -

José Luis Murillo.

Fuente: Administrador Versión: 1.0

Descripción: La aplicación web debe permitir a los usuarios mayores de edad u que
vivan en el contienen de Europa o América registrarse en el sistema.

Pasos de secuencia normal:

1. El usuario debe ingresar a la dirección web de la asociación internacional de

chefs.
2. La aplicación presentara la página principal.
3. El usuario tendrá que seleccionar en la parte superior derecha el botón de
registrar.
4. El sistema mostrara al usuario los campos de correo electrónico, nombre de
usuario, y contraseña.
5. El usuario ingresará los datos solicitados y oprimirá el botón guardar.
6. El sistema guardara la información del usuario en la base de datos.
7. El sistema enviara una notificación al correo electrónico para activar la cuenta.
8. El usuario deberá dar clic en el enlace del correo para activar la cuenta.
Precondiciones:

1. Ser mayor de edad, se verificará con la fecha de nacimiento del usuario.

2. La limitación geográfica se validará posteriormente con nuestro cliente.
A continuación, vamos a describir los requisitos de datos:

Requisito de datos

ID: RD01 Fecha de creación: 16/05/2022

Nombre: Información para registrar un Fecha de revisión: 19/05/2022

usuario

Autores: Jonatan López, Jhoan Rativa y Fecha de aprobación: -

José Luis Murillo.

Fuente: Administrador Versión: 2

Tipo: Datos de entrada.

Datos específicos a mantener: idUsuario, nombreUsuario, correoUsuario,

passwordUsuario, tokenUsuario, usuarioActivo, fechaNacimientoUsuario,
paisUsuario, ciudadUsuario, direcciónUsuario

Detalles: El campo passwordUsuario debe estar encriptado en la base de datos.

El campo tokenUsuario se utiliza para la activación de la cuenta y expira en 24 horas.

Para registrarse un usuario debe ser mayor de edad y pertenecer a la zona

geográfica América o Europa.
Diagrama de caso de uso e interfaz de la aplicación

Figura 1. Diagrama del caso de uso que muestra la forma en la que el usuario se registrara.

Figura 2. Interfaz gráfica para el registro del usuario

Autenticar usuario al ingresar a la aplicación de la AIC.

La empresa AIC desea una funcionalidad de autenticación, en la cual los usuarios

previamente registrados puedan acceder a secciones especiales del aplicativo.

Descripción del caso uso

ID: CU02 Fecha de creación: 18/05/2022

Nombre: Autenticar usuario Fecha de revisión: 19/05/2022

Autores: Jonatan López, Jhoan Rativa y Fecha de aprobación: -

José Luis Murillo.

Fuente: Administrador Versión: 1.0

Descripción: La aplicación web debe permitir a todos los tipos de usuarios previamente
registrados autenticarse en el aplicativo web

Pasos de secuencia normal:

1. El usuario debe ingresar a la dirección web de la asociación internacional de

chefs.
2. El usuario tendrá que seleccionar en la parte superior derecha el botón de
ingresar.
3. El sistema mostrara al usuario los campos de correo electrónico, y contraseña.
4. El usuario ingresara los datos solicitados y seleccionar el botón acceder.
5. Si los datos del paso 4 son correctos, el sistema presentara en pantalla
información privada del perfil del usuario.

Precondiciones:

• Registrase y activar la cuenta personal.

 Caminos alternos:

Si los datos en el paso 4 son incorrectos el sistema presentara en pantalla el

mensaje, “contraseña invalida” - ¿Olvido su contraseña?

1. El usuario debe dar clic en olvido su contraseña

2. El sistema enviara un correo electrónico al usuario con un enlace para
reestablecer la contraseña.
3. El usuario da clic en el enlace en su correo.
4. El sistema redirecciona el usuario a una url donde presenta los campos de
nueva contraseña y confirme nueva contraseña.
5. Cuando los dos campos coincidan el sistema modificara la contraseña del
usuario en la base de datos y se mostrar el mensaje en pantalla “contraseña
modificada exitosamente, ingrese nuevamente.”

A continuación, vamos a describir los requisitos de datos:

Requisito de datos

ID: RD02 Fecha de creación: 16/05/2022

Nombre: Información para autenticar un Fecha de revisión: 19/05/2022

usuario.

Autores: Jonatan López, Jhoan Rativa y Fecha de aprobación: -

José Luis Murillo.

Fuente: Administrador Versión: 2

Tipo: Datos de entrada

Datos específicos a mantener: correoUsuario, passwordUsuario.

Detalles: No aplica
Diagrama de caso de uso e interfaz de la aplicación

Figura 3. Caso de uso autenticar usuario

Figura 4. Interfaz gráfica autenticar usuario

Cargar la receta, con todos sus aspectos asociados (categoría, lista de ingredientes,
procedimiento, dificultad, costo, etc.)

La empresa AIC desea una funcionalidad de cargue de receta donde se presenten sus
características asociadas, por ejemplo: categoría, lista de ingredientes, procedimiento,
dificultad, costo, etc.

Descripción del caso uso

ID: CU03 Fecha de creación: 19/05/2022

Nombre: Cargar receta Fecha de revisión: 19/05/2022

Autores: Jonatan López, Jhoan Rativa y Fecha de aprobación: -

José Luis Murillo.

Fuente: Administrador Versión: 1.0

Descripción: La aplicación web debe permitir a todos los usuarios registrados y

autenticados subir recetas al sistema con sus características asociadas: categoría, lista
de ingredientes, procedimiento, dificultad, costo, etc.

Pasos de secuencia normal:

1. El usuario debe autenticarse en la aplicación.

2. El usuario debe seleccionar la opción crear recetas.
3. El usuario debe diligenciar los campos solicitados en el formulario: categoría,
lista de ingredientes, procedimiento, dificultad, costo.
4. El usuario podrá agregar imágenes o videos de la receta si lo considera
necesario
5. El usuario seleccionara la opción guardar.
6. El sistema debe guardar los datos capturados del formulario en la base de datos
del aplicativo.

Precondiciones:

• Autenticarse en el aplicativo
A continuación, vamos a describir los requisitos de datos:

Requisito de datos

ID: RD03 Fecha de creación: 18/05/2022

Nombre: Información para cargar una Fecha de revisión: 19/05/2022

receta

Autores: Jonatan López, Jhoan Rativa y Fecha de aprobación: -

José Luis Murillo.

Fuente: Administrador Versión: 1.0

Tipo: Datos de entrada.

Datos específicos a mantener:

Para una receta: idReceta, nombreReceta, claseReceta, ingredientesReceta,

elaboracionReceta, dificultad y costeTotal, urlAnexos.

Ingredientes: idIngrediente, nombreIngrediente, categoriaIngrediente, cantidad,

precio.

categoria_ingrediente: idCategoriaIngrediente, nombreCategoriaIngrediente.

Detalles: Los anexos se subirán a un servidor en la nube y la URL con la información

se guardará en la BBDD en el atributo urlAnexos de la tabla receta.
Diagrama de caso de uso e interfaz de la aplicación

Figura 4. Caso de uso cargar receta

Figura 5. Interfaz gráfica crear receta

Buscar recetas en base a distintos aspectos: clase de receta, tipo de ingrediente de
base, nivel de dificultad, costo de la receta.

La empresa AIC desea una funcionalidad que permita a cualquier tipo de usuario realizar
una búsqueda de recetas para ello puede utilizar uno o varios criterios como clase de
receta, tipo de ingrediente base, nivel de dificultad y coste de la receta.

Descripción del caso uso

ID: CU04 Fecha de creación: 16/05/2022

Nombre: Realizar búsqueda de recetas Fecha de revisión: 19/05/2022

Autores: Jonatan López, Jhoan Rativa y Fecha de aprobación: -

José Luis Murillo.

Fuente: Administrador Versión: 2

Descripción: La aplicación web debe permitir a todos los tipos de usuarios (ya sean
registrados o no) realizar la búsqueda de recetas con los distintos tipos de filtro (clase
de receta, tipo de ingrediente base, nivel de dificultad y costo de la receta).

Pasos de secuencia normal:

1. El usuario debe seleccionar la opción buscar.

2. La aplicación le mostrara la interfaz de búsqueda.
3. El usuario tendrá que elegir con qué tipo de filtro desea realizar la búsqueda.
Los filtros existentes son clase de receta, tipo de ingrediente base, nivel de
dificultad y costo de la receta.
4. El usuario podrá hacer uso de uno o varios de los filtros existentes.

Precondiciones:

• La información que muestra los filtros de búsqueda debe existir en la base de

datos
A continuación, vamos a describir los requisitos de datos, para ello previamente hemos
definido las recetas, clases de receta que existen, los tipos de ingredientes, los niveles de
dificultad y el coste.

Requisito de datos

ID: RD04 Fecha de creación: 16/05/2022

Nombre: Información de una búsqueda Fecha de revisión: 19/05/2022

de una receta

Autores: Jonatan López, Jhoan Rativa y Fecha de aprobación: -

José Luis Murillo.

Fuente: Administrador Versión: 2

Tipo: Datos de salida.

Datos específicos a mantener: nombreReceta, claseReceta, ingredientesReceta,

dificultad y coste.
Diagrama de caso de uso e interfaz de la aplicación

Figura 7. Diagrama de casos de uso realizar búsqueda de recetas

Figura 8. Interfaz de la aplicación web para realizar una búsqueda

Visualizar resultados de búsqueda

La empresa AIC desea una funcionalidad que permita a cualquier tipo de usuario visualizar
los resultados de la búsqueda que se han hecho.

Descripción del caso uso

ID: CU05 Fecha de creación: 16/05/2022

Nombre: Visualizar resultados de Fecha de revisión: 19/05/2022

búsqueda

Autores: Jonatan López, Jhoan Rativa y Fecha de aprobación: -

José Luis Murillo.

Fuente: Administrador Versión: 2

Descripción: La aplicación web debe permitir a todos los tipos de usuarios (ya sean
registrados o no) visualizar los resultados de la búsqueda que han realizado.

Pasos de secuencia normal:

1. El usuario previamente debe haber realizado una búsqueda.

2. La aplicación le mostrara la interfaz con los resultados de la búsqueda.

Precondiciones:

• Las recetas deben existir en la Base de datos.

Para esta funcionalidad no hace falta describir los requisitos de datos ya que han sido
previamente definidos, tanto en la funcionalidad cargar receta como en la búsqueda de una
receta.

Diagrama de caso de uso e interfaz de la aplicación

Figura 9. Diagrama de casos de usos para visualizar resultados de búsqueda

Figura 10. Interfaz de la aplicación web con los resultados de las búsqueda
Visualizar la información sobre cada receta

Para esta funcionalidad no hace falta describir los requisitos de datos ya que han sido
previamente definidos, tanto en la funcionalidad cargar receta como en la búsqueda de una
receta. Se mostrará la información de una receta.

Descripción del caso uso

ID: CU06 Fecha de creación: 19/05/2022

Nombre: Visualizar información sobre Fecha de revisión: 23/05/2022

cada receta

Autores: Jonatan López, Jhoan Rativa y Fecha de aprobación: -

José Luis Murillo.

Fuente: Administrador Versión: 2

Descripción: La aplicación web debe permitir a todos los tipos de usuarios (ya sean
registrados o no) visualizar la información sobre cada una de las recetas.

Pasos de secuencia normal:

1. El usuario previamente debe haber realizado una búsqueda y seleccionado una

receta.
2. La aplicación le mostrara la interfaz con la información detallada de una receta.

Precondiciones:

• Las recetas deben existir en la Base de datos.

Diagrama de caso de uso e interfaz de la aplicación

Figura11. Diagrama de casos de uso para visualizar una receta

Figura 12. Interfaz de la aplicación web para visualizar una receta

Compartir la receta en las Redes

La empresa AIC desea que los usuarios ya sean registrados o no puedan compartir mediante
las redes sociales las recetas que hayan causado impacto al momento de la búsqueda.

Descripción del caso uso

ID: CU07 Fecha de creación: 22/05/2022

Nombre: Compartir la receta en las Redes Fecha de revisión: 25/05/2022

Autores: Jonatan López, Jhoan Rativa y José Fecha de aprobación: -

Luis Murillo.

Fuente: Administrador Versión: 2

Descripción: el desarrollo de este Software debe permitir a un usuario este registrado o no

pueda compartir las recetas que hayan casado impacto en el usuario a través de las redes
sociales como Facebook, Instagram o WhatsApp y de tal manera permita que la app web
como la receta se haga conocida en poco tiempo y generar cierta popularidad.

Pasos de secuencia normal:

1. Cliente debe buscar la receta.

2. Si la receta es de gusto del cliente la compartirá mediante las redes sociales tan
solo con pulsar en un icono.

Precondiciones:

• la receta debe proporcionar información actualizada para que el usuario pueda

compartir
En esta funcionalidad no existen requisitos de datos ya que mediante un enlace se compartirá
directamente en las redes sociales que se escojan. Se utilizar las apps que tienen a su
disposición las aplicaciones de WhatsApp, Instagram y Facebook.

Requisito de datos

ID: RD05 Fecha de creación: 22/05/2022

Nombre: Información para compartir una Fecha de revisión: 25/05/2022
receta
Autores: Jonatan López, Jhoan Rativa y Fecha de aprobación: -
José Luis Murillo.
Fuente: Administrador Versión: 2

Tipo: Datos de salida.

Datos específicos a mantener: no hay información que se almacenen en la base de

datos.

Detalles: solo se comparte un enlace con la ruta a la receta de interés.

Diagrama de caso de uso e interfaz de la aplicación

Figura 13. Diagrama de Caso de Uso para compartir receta en las redes

Figura 14. Interfaz de la aplicación web para compartir una receta

Valorar receta (de 1 a 5 estrellas)

La empresa AIC indica que cada receta debe ser valorada por todo tipo de usuario que
navegue por la aplicación, dando una puntuación mediante un número determinado de
estrellas de 1 como la puntuación más baja y 5 la más alta.

Descripción del caso uso

ID: CU08 Fecha de creación: 22/05/2022

Nombre: Valorar receta Fecha de revisión: 25/05/2022
Autores: Jonatan López, Jhoan Rativa y José Fecha de aprobación: -
Luis Murillo.
Fuente: Administrador Versión: 2

Descripción: La aplicación web debe permitir a todos los tipos de usuarios (ya sean registrados
o no) realizar una calificación a la receta mediante estrellas lo cual ayudara a notar al dueño de
dicha receta la efectividad de la misma y si hay algo que tenga que modificar para mejorar la
experiencia del usuario mediante dicha calificación.

Pasos de secuencia normal:

1. El usuario deberá buscar una receta.

2. El usuario deberá valorar la receta.
3. Debe escoger el nivel de estrellas que merece la receta (1 la más baja calificación y 5
lamas alta).

Precondiciones:
• En la base de datos debe existir un atributo que permita almacenar la calificación
Para el requisito de datos se debe definir la calificación de cada receta mediante números 1
malo, 2 regular, 3 aceptable, 4 bueno, 5 excelente, lo cual en la interface está representado
mediante estrellas.

Requisito de datos

ID: RD06 Fecha de creación: 22/05/2022

Nombre: Información para la valoración de la Fecha de revisión: 25/05/2022
receta
Autores: Jonatan López, Jhoan Rativa y José Fecha de aprobación: -
Luis Murillo.
Fuente: Administrador Versión: 2

Tipo: Datos de salida.

Datos específicos a mantener: calificacionUsuario.

Detalles: la información que llegara a la base de datos será numérica aceptara del 1 al 5 esto
permitirá evaluar la aplicación y mejorar su calidad.
Diagrama de caso de uso e interfaz de la aplicación

Figura 15. Diagrama de Caso de Uso valorar receta

Figura 16. Interfaz de la aplicación web para valorar una receta

Conclusiones

El lenguaje UML resulto ser una herramienta que ha permitido organizar de forma ordenada
las ideas y comprender la funcionalidad de lo que se va a desarrollar en la web app,
descubriendo con mayor facilidad los requisitos del enunciado y nuevos requisitos que es
están explícitos en el enunciado indicado por el cliente, además de dar una visión más sólida
y aclarar dudas para proceder con el desarrollo del prototipado y que la aplicación pueda ser
de gusto del usuario tanto en experiencia como interface.

Los formatos de caso de uso facilitan la relación entre un cliente y el programador al

establecer pautas comunes respecto al desarrollo de determinada funcionalidad dentro del
aplicativo a crear. Al mismo tiempo permite al cliente comprender los caminos alternativos
que puede tomar un usuario si se cumple determinadas condiciones, como, por ejemplo, al
momento de olvidar la contraseña o cuando el usuario se registra por primera vez.
Bibliografía

Balsamiq. (27 de mayo de 2022). Balsamiq Studios. Obtenido de

https://balsamiq.com/wireframes/
Ríos, J. R. (3 de 6 de 2017). 3C Tecnologia. Obtenido de 3C Tecnologia:
https://universidadviu.idm.oclc.org/login?url=https://www.proquest.com/scholarly-
journals/estado-del-arte-metodologías-de-desarrollo-en/docview/1950646386/se-2
Schmuller, J. (1997). Aprendiendo UML. (P. Hall, Ed.) Mexico: Pearson Education
Latinoamerica.