11. Parada para planificar y restructurar la API

14/04/20191 Min lectura — En Planning, Client, API, 😀

Es tiempo de planificación, ahora que parece más claro lo que quiero ejecutar.

Este PhiloTinder (nombre no oficial) tiene que girar en torno a tres patas:

  • Citas (pero no entre personas, sino de los filósofos). Internamente serán el modelo Quote.
  • Filósofos, a los que llamaremos Author.
  • Los votos, tanto positivos como negativos, que se definen en el modelo Vote.

Un poco más adelante trabajaremos la tercera pestaña que se pueden ver en estos gráficos: el registro de usuarios. Por ahora vamos a olvidarnos de la autenticación para centrarnos en la lógica relativa al cliente construido con React.

La pantalla de cada Quote aparecerá de forma aleatoria. La idea es que se vote en positivo o negativo. Una vez votado saltará a la siguiente. También podemos recargar sin voto.

Tenemos ya gran parte de esto construido, nos quedará:

  • Guardar y recuperar votos en el servidor.
  • Eliminar o informar sobre la posibilidad de votar lo que ya has votado.

PhiloTinder-Page-1

En la pestaña de Ranking veremos las citas o los autores en función de sus votos. Es relevante saber si es una o la otra, pero el reto aquí será ya mantener estas cosas en el cliente:

  • Un Router para mostrar páginas diferentes.
  • Asociar el "Cargar más" con los resultados del servidor a través de la API.

PhiloTinder-Page-2

En la primera de las pantallas a nivel de cliente podríamos tener esta estructura. El elemento esencial es el QuoteItem del que parten las relaciones con el VoteButton (aquí hablamos de componentes del cliente) y con el AutorItem de cada cita.

PhiloTinder-Page-3-a

En la pantalla del listado de citas trabajaremos con un listado QuoteList del que sacaremos el resto de elementos relacionados.

PhiloTinder-Page-3-b

Así si se hace todo más fácil, ¿verdad?

Las imágenes están diseñadas con draw.io. El código puedes seguirlo en mi cuenta de GitHub.