Vertical Slicing (III) — Ejemplo práctico (Checkout de un e-commerce)

Ejemplo práctico — Checkout de e-commerce:

El primero de los casos es intentar encontrar los incrementos al crear una página de checkout de un e-commerce. La página donde vemos la lista de elementos que queremos comprar, añadimos los datos necesarios y pagamos con el medio que deseemos.

1. Preparar un primer problema grande

Este paso lo vamos a obviar, ya que para cerrar el contexto del ejercicio asumimos que entendemos y tenemos claro el porqué, el para quien es y el para qué lo necesita.

2. Encontrar las actividades necesarias (funcionalidades, capacidades o comportamientos)

  • Ver resumen de compra.
  • Recoger los datos del usuario.
  • Seleccionar donde enviar
  • Pagar la compra.

3. Encontrar los conceptos de cada actividad que añadan complejidad

  • Mostrar el coste de la compra.
  • Listar los artículos que vamos a comprar.
  • Que información de cada artículo vamos a mostrar.

4. Identificar todas las posibles variaciones

5. Reducir todas las posibles variaciones a una — Vertical slicing

  • Para la primera actividad, obtener un resumen de compra donde solo veamos el coste total de una compra de 1 solo artículo y sin más información que la lista de 1 artículo.
  • Para los datos del usuario, de inicio, con solo recoger el e-mail de un usuario no registrado y únicamente 1 dirección nos valdrá.
  • Finalmente con probar como pagar con Paypal, sin tener en cuenta ningún descuento, puede ser una primera versión básica suficiente.

El objetivo es tener una versión básica del sistema, con funcionalidades básicas — no las funcionalidades finales — que nos pueden dar feedback de la complejidad a la que nos vamos a enfrentar y que podamos ir haciendo crecer incremento a incremento.

6. Desarrollar en baby steps iterativos e incrementales

Ahora que tenemos un primer slice vertical, tendremos que implementarlo. Volveremos al paso 2, ahora con esta primera versión del sistema, para encontrar de nuevo pequeños incrementos o baby steps.

  • Diseño visual de la lista: CSS básico → CSS más bonito
  • Mostrar la compra: Una compra hardcodeada una compra recibida desde el servicio
  • Recibir la compra del servicio: No recibir ningúna compra (nos vale con la hardcodeada) recibir una compra del servicio pero hardcodeada en el servicio → Recibir una compra real de la base de datos desde el servicio

Para encontrar el primer incremento, la pregunta más adecuada sería ¿Cuál es el feedback que buscamos? ¿Cuál es la incertidumbre que deseamos resolver cuanto antes? Siempre buscaremos resolver estas preguntas con software funcionando. Seguramente un software muy básico, pero software funcional.

Os expongo varios ejemplos:

  • Si primero quisiéramos conocer si nuestra lista de la compra encaja bien en el diseño de la APP, un primer incremento podría ser algo como esto:
  • Imaginemos que no nos interesa la parte más visual, sino realmente empezar a reducir incertidumbre respecto a la conexión y a como funciona el servicio de carrito. Ya sea porque no lo conocemos, porque es un servicio muy legacy o porque no lo hemos usado nunca. En este caso, un primer incremento puede ser algo así:

El mindset que debemos tener es el mismo que para usar TDD. No te quedas en el primer test, vas avanzando en el desarrollo de la solución con muy pequeños nuevos tests que van completando la solución, pero no tratas de saltar a la solución final desde el inicio.

Los baby steps también van a variar dependiendo de ese conocimiento o incertidumbre que tengamos. Podríamos tener mucho conocimiento y considerar que es algo muy simple usar la base de datos para tener ya una compra real con la cual recibir feedback.

  • Haremos lo mismo para la parte de recoger datos y la dirección
  • Terminamos esta parte de encontrar los baby steps con la parte de pagos.

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store