Portafolio personal · Desarrollo web e inteligencia artificialCix Code

Paleta de comandos

↑ ↓ navegar↵ abrirEsc cerrar
Blog
Desarrollo Web

Del código QR a la mesa: cómo diseñar un flujo de pedidos

Un recorrido por la carta, el carrito y el envío de un pedido, a partir del problema que aborda Sabor Bravo.

· 2 min de lectura

Una carta digital por QR abre el menú. El reto empieza cuando una persona elige platos, modifica cantidades y confirma qué quiere pedir. Sabor Bravo reúne ese recorrido con pedidos para mesa, recojo y entrega a domicilio. A partir de ese caso, esta nota propone cómo organizar un flujo de pedidos sencillo.

Del menú al carrito

El menú responde qué se puede pedir. El carrito conserva la selección y calcula un subtotal para orientar al usuario. Conviene guardar la selección como pares de identificador y cantidad, y obtener el subtotal de esos datos y del catálogo. Así, la interfaz evita mantener dos versiones independientes del mismo total.

La pantalla de confirmación debe indicar qué modalidad se eligió y qué información falta. Un pedido para mesa necesita identificar la mesa. Un pedido a domicilio necesita una dirección de entrega. Si el usuario cambia de modalidad, los campos y la validación deben reflejar el cambio.

Qué valida el servidor

Al enviar el pedido, el navegador puede enviar los identificadores y cantidades. El servidor comprueba que cada producto esté disponible y calcula el importe con los precios vigentes. Si el precio mostrado cambió, una opción es devolver el importe actualizado y pedir una nueva confirmación. El siguiente ejemplo representa una solicitud ilustrativa.

{
  "modalidad": "mesa",
  "mesa": "12",
  "items": [
    { "productoId": "p-001", "cantidad": 2 }
  ]
}

La solicitud identifica una mesa y lleva cantidades, sin enviar el precio como dato autoritativo. El servidor busca cada producto en el catálogo y responde con el importe calculado. El flujo es carta → carrito → confirmación → registro del pedido.

Para registrar el pedido y sus líneas como una sola operación, una transacción permite confirmar ambos pasos juntos. Una clave de idempotencia puede identificar un reintento del mismo envío y evitar que llegue un pedido duplicado a cocina.

Tres escenarios para probar

  1. Cambiar la modalidad de mesa a recojo y revisar que el pedido final use los campos correctos.
  2. Agotar un producto mientras permanece en el carrito y comprobar que la aplicación explique cómo continuar.
  3. Perder la conexión después del envío y repetirlo con la misma clave. Debe haber un solo pedido.

Sabor Bravo · Pensar en React · Transacciones en PostgreSQL

Evidencia del proyecto

Captura de Sabor BravoVer el caso de estudio de Sabor Bravo