Promptly 06 - Búsqueda de prompts

Como ya señalamos en sesiones previas, el manejo de tags parece un elemento importante, lo trabajaremos en esta sesión. Sin embargo, vista la experiencia actual del listado de prompts, no parece que tenga sentido mostrar toda la info y las acciones en el listado de prompts (por claridad, por rapidez en las consultas...). Sería mejor mostrar esa info desde el detalle del prompt individual; así que voy a hacer primero algunos ajustes, simplificando la lista de prompts.

Acciones

Lista mejorada de prompts + username!

Solo nombre, autor y fecha del prompt en la lista sería lo ideal; solo hay un pequeño problema 😄: con el registro actual (email y clave), no hay nombre de usuario, solo email.

En este punto, creo que es razonable que se pida como input y se guarde al registrar al usuario, como el típico username único de toda red social. No creo que sea adecuado mostrar, por privacidad, el email de las personas que se registran; este solo es requerido para validar el signup / sign-in y si lo compartes, puede acabar en spam o correos no deseados.

Tiro un poco de ChatGPT, lo suficiente para averiguar que Supabase no da la feature tal cual, hay que currárselo un poco y saber lo que se quiere (precisamente porque exponer email u otros datos de los users es delicado). Me tropiezo con esta referencia, que a su vez apunta a la guia recomendada de Supabase para user-data y sigo su enfoque: básicamente un trigger y una nueva tabla para mantener users y sus nombres separados pero sincronizados.

Info

Por cierto, me he dado cuenta, al ir a mirar unos cambios WIP, que no tengo debugger para el lado server-side (sí para cliente, con chrome). Siguiendo la guía de NextJS se pueden poner ambos en VS Code: https://nextjs.org/docs/pages/guides/debugging#debugging-with-vs-code, y con esto en el proyecto es más fácil trabajar.

Colecciones de prompts con tags / buscar

Las tags son un elemento central, pero en compañía de estas y para tener un buen catálogo, hay ciertos elementos que sí o sí deberían estar en el producto, así que con algo de ayuda de ChatGPT y GPT-4.1 en VSCode, implemento las siguientes features:

UX de la búsqueda

Como el objetivo al final es poder compartir fácilmente prompts, es interesante persistir el estado en la url, lo cual permite compartir búsquedas fácilmente...

Durante un rato le he estado dando vueltas también a la experiencia de uso de los tags. Por ejemplo:

Después de revisar experiencias de otros productos, he decidido adoptar un enfoque que me gusta mucho y es sencillo, que son las labels en github: básicamente en la caja de búsqueda se permite escribir una sintaxis muy sencilla (label:nombreLabel) y esto permite de forma cómoda agregarlas a la búsqueda; en mi caso lo implemento, con tag:miTag. Este mismo sistema es extrapolable a otras propiedades en el futuro (por ejemplo, búsqueda por usuario, con user:username).

Por otro lado, para aplicarlas, basta con hacer clic en la tag, cuando aparecen asignadas (permitiendo algo como "buscar similares"): caja de búsqueda - url irán siempre acompasadas. Para el filtro, juego un rato con la UI y me decido por un dropdown sencillo, a la derecha de la caja de búsqueda.

Compartir prompt

Una vez la búsqueda está resuelta bien, la página clave es la vista pública del prompt. Una página sencilla, de solo lectura, para mostrar el prompt en sí, que implemento de forma rápida. La url será /prompts/[id_prompt]

Como está pensada como página pública, para compartir un prompt por ejemplo en una red social, es interesante dotarla de los metadatos en el servidor, basados en un estándar como OpenGraph. NextJS permite fácilmente usar su función generateMetadata para que se generen las previsualizaciones adecuadas al compartir.

Promptly 06 - Búsqueda de prompts

Sesión 6

Punto de partida

Objetivos

Tareas