Saltar al contenido principal

Cómo implementar el botón de edición de Twitter con Ent

· 6 min de lectura
Amit Shani
[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

La función de "Botón de Edición" de Twitter llegó a los titulares con el tuit de encuesta de Elon Musk preguntando si los usuarios querían esta función o no.

Tuit de Elon

Sin duda, esta es una de las funciones más solicitadas de Twitter.

Como desarrollador de software, inmediatamente empecé a pensar cómo implementaría esto yo mismo. El problema de seguimiento/auditoría es muy común en muchas aplicaciones. Si tienes una entidad (por ejemplo, un Tweet) y quieres rastrear cambios en uno de sus campos (como el campo content), existen muchas soluciones comunes. Algunas bases de datos incluso tienen soluciones propietarias como el seguimiento de cambios de Microsoft o las Tablas con Versiones de Sistema de MariaDB. Sin embargo, en la mayoría de casos tendrías que "armarlo" tú mismo. Afortunadamente, Ent ofrece un sistema modular de extensiones que te permite integrar funciones como esta con solo unas líneas de código.

Twitter + Botón de Edición

if only

Introducción a Ent​

Ent es un framework de entidades para Go que simplifica enormemente el desarrollo de aplicaciones grandes. Ent incluye características impresionantes desde el primer momento, como:

Con el motor de generación de código de Ent y su avanzado sistema de extensiones, puedes modularizar fácilmente tu cliente de Ent con funciones avanzadas que normalmente requieren mucho tiempo para implementar manualmente. Por ejemplo:

Enthistory​

enthistory es una extensión que comenzamos a desarrollar cuando quisimos añadir un panel de "Actividad e Historial" a uno de nuestros servicios web. La función del panel es mostrar quién cambió qué y cuándo (auditoría). En Atlas, una herramienta para gestionar bases de datos mediante archivos HCL declarativos, tenemos una entidad llamada "schema" que es esencialmente un gran bloque de texto. Cualquier cambio en el esquema se registra y puede verse después en el panel de "Actividad e Historial".

Actividad e Historial

The "Activity & History" screen in Atlas

Esta función es muy común y aparece en muchas aplicaciones como Google Docs, las PRs de GitHub y las publicaciones de Facebook, pero desafortunadamente falta en el muy popular y querido Twitter.

Más de 3 millones de personas votaron a favor de añadir el "botón de edición" a Twitter, ¡así que permíteme mostrar cómo Twitter puede hacer felices a sus usuarios sin sudar la gota gorda!

Con Enthistory, solo tienes que anotar tu esquema de Ent así de simple:

func (Tweet) Fields() []ent.Field {
    return []ent.Field{
        field.String("content").
            Annotations(enthistory.TrackField()),
        field.Time("created").
            Default(time.Now),
    }
}

Enthistory se integra en tu cliente de Ent para garantizar que cada operación CRUD en "Tweet" quede registrada en la tabla "tweets_history", sin modificar código, y ofrece una API para consultar estos registros:

// Creating a new Tweet doesn't change. enthistory automatically modifies
// your transaction on the fly to record this event in the history table
client.Tweet.Create().SetContent("hello world!").SaveX(ctx)

// Querying history changes is as easy as querying any other entity's edge.
t, _ := client.Tweet.Get(ctx, id)
hs := client.Tweet.QueryHistory(t).WithChanges().AllX(ctx)

Veamos qué tendrías que hacer si no usaras Enthistory: Por ejemplo, imagina una app similar a Twitter. Tiene una tabla llamada "tweets" y una de sus columnas es el contenido del tuit.

idcontentcreated_atauthor_id
1Hello Twitter!2022-04-06T13:45:34+00:00123
2Hello Gophers!2022-04-06T14:03:54+00:00456

Ahora, supongamos que queremos permitir a los usuarios editar el contenido y mostrar simultáneamente los cambios en el frontend. Existen varios enfoques comunes para resolver este problema, cada uno con sus pros y contras (los analizaremos en otro post técnico). Por ahora, una solución posible sería crear una tabla "tweets_history" que registre los cambios de un tuit:

idtweet_idtimestampeventcontent
112022-04-06T12:30:00+00:00CREATEDhello world!
222022-04-06T13:45:34+00:00UPDATEDhello Twitter!

Con una tabla como la anterior, podemos registrar cambios en el tuit original "1". Si se solicita, podríamos mostrar que se publicó originalmente a las 12:30:00 con el contenido "¡hola mundo!" y se modificó a las 13:45:34 a "¡hola Twitter!".

Para implementar esto, tendríamos que modificar cada sentencia UPDATE de "tweets" para incluir un INSERT en "tweets_history". Para garantizar la corrección, deberíamos envolver ambas operaciones en una transacción, evitando así corromper el historial si la primera operación tiene éxito pero la posterior falla. También necesitaríamos asegurar que cada INSERT en "tweets" vaya acompañado de un INSERT en "tweets_history".

# INSERT is logged as "CREATE" history event
- INSERT INTO tweets (`content`) VALUES ('Hello World!');
+BEGIN;
+INSERT INTO tweets (`content`) VALUES ('Hello World!');
+INSERT INTO tweets_history (`content`, `timestamp`, `record_id`, `event`)
+VALUES ('Hello World!', NOW(), 1, 'CREATE');
+COMMIT;

# UPDATE is logged as "UPDATE" history event
- UPDATE tweets SET `content` = 'Hello World!' WHERE id = 1;
+BEGIN;
+UPDATE tweets SET `content` = 'Hello World!' WHERE id = 1;
+INSERT INTO tweets_history (`content`, `timestamp`, `record_id`, `event`)
+VALUES ('Hello World!', NOW(), 1, 'UPDATE');
+COMMIT;

Este método funciona, pero tendrías que crear otra tabla para cada entidad diferente ("comment_history", "settings_history"). Para evitarlo, Enthistory crea una única tabla "history" y otra "changes" donde registra todos los campos rastreados. Además, soporta múltiples tipos de campos sin necesidad de añadir columnas adicionales.

Versión preliminar​

Enthistory aún está en fase de diseño inicial y se está probando internamente. Por tanto, todavía no lo hemos publicado como código abierto, aunque planeamos hacerlo muy pronto. Si quieres probar una versión preliminar de Enthistory, he desarrollado una aplicación simple en React con GraphQL+Enthistory para demostrar cómo podría funcionar la edición de tuits. Puedes verla aquí. ¡Te invito a compartir tus comentarios!

Para finalizar​

Hemos visto cómo el sistema modular de extensiones de Ent te permite implementar funcionalidades avanzadas como si fueran un simple paquete instalable. Desarrollar tu propia extensión es divertido, sencillo y educativo! ¡Te animo a intentarlo! En el futuro, Enthistory permitirá rastrear cambios en relaciones (tablas con claves foráneas), integrarse con extensiones OpenAPI y GraphQL, y ofrecerá más métodos para su implementación subyacente.

[Para más noticias y actualizaciones de Ent:]