11. Parada para planificar y restructurar la 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.
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.
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.
En la pantalla del listado de citas trabajaremos con un listado QuoteList
del que sacaremos el resto de elementos relacionados.
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.