Agregando comentarios al blog

Seguimos agregando funcionalidad a mi pobre blog hecho a pulmón, esta vez le toco el turno a los comentarios.

Agregar comentarios en un blog debe ser una de las cosas mas básicas y necesarias, pero a la vez, de las mas molestas, porque el SPAM es terrible, y nadie tiene ganas (ni tiempo) de pasarse borrando basura de los posts.

Entonces, que podemos hacer para combatirlo? Vamos por partes, dijo Jack.

Lo primero es pensar donde vamos a guardar los comentarios.

Backend

En mi caso, todo el blog esta en tablas de DynamoDb de AWS, así que seguimos con la misma idea: una tabla de Comments, con una key de un GUID, y un Global Secondary Key con el PostId (otro GUID), ordenado por fecha, es lo único que necesitamos a nivel estructura.

Luego, agregamos un par de endpoints para guardar el comentario, y listo (hasta ahora no hay nada "raro" en el medio).

Ahora, que podemos hacer para evitar el SPAM? Pensé en poner reCAPTCHA de Google, pero últimamente, a mi me esta funcionando bastante mal: falla cosas que son realmente obvias, y aparte, con todo el reconocimiento de imágenes que tiene la IA, no se si usar imágenes es una buena forma de "validar" que sos humano.

Entonces, que alternativas tenia? Podía poner un textbox para resolver una operación matemática bien tonta (tipo "Cuanto es 3 * 7", pero quería ir un poco mas allá, así que investigue que otras alternativas había.

Me cruce con algo llamado FriendlyCaptcha (ya el nombre es bastante catchy), hecho en la Unión Europea, que dice ser fácil de usar, fácil de implementar y difícil de saltar por bots.

A pesar de no ser gratis, hay una licencia "free" que mas que suficiente para un blog con poco trafico:

Entonces, me saque una cuenta, que te provee un Key para que puedas usar, y listo. Se implementa exactamente igual que ReCAPTCHA, así que, si quiero cambiarlo en algún momento (cuando tenga mas de 1000 requests por mes, JAJAJA), puedo hacerlo sin problemas 😎

Ya teniendo en cuenta que los comentarios estaban "protegidos" de los bots, ahora solo restaba tener algún Feature Flag para prender o apagar la funcionalidad. Obviamente, termine en lo mas conocido: LaunchDarkly (aunque la verdad, siento que estoy matando una mosca con una bomba atómica, pero es mas cómodo que usar el iFeatureFlag de .NET para leerlo desde las variables de entorno/settings).

De nuevo, la cuenta free es mas que suficiente para un blog personal, así que vamos con esa!

Finalmente, la cosa queda mas o menos así:

También agregamos un par de Unit Tests e Integration Tests, corriendo contra LocalStack (tengo pendiente un post de eso!)

Frontend

El frontend es, en realidad, bastante tonto: El blog corre en NextJS, asi que la mayoría de las paginas son server-side. Pero claro, tenemos que incluir el Javascript para poder resolver el puzzle del FriendlyCaptcha, así que, toda esa parte en particular, tiene que tener use client arriba, para también poder usar useState para el formulario. No tuve mucho problema con eso, porque FriendlyCaptcha tiene una libraria de React disponible para usar, así que fue mas que nada conectar las partes.

Después, para mostrar los comments, tengo un endpoint nuevo en la API que trae los comentarios del post donde estamos parados, y muestra la info. Obviamente el mail no se muestra (nadie quiere mas SPAM del que ya nos llega), solo lo pido para poder contactar a la persona en caso de necesitarlo.

Una vez que la API nos devuelve que el comentario fue guardado, y esta todo OK, agregamos al array de comentarios y refrescamos la data de la pagina, y listo!

Me queda resolver (no solo para los comentarios sino en general) unos temas de cache de NextJS (la verdad que no conozco mucho, así que tengo que investigar un toque), pero en general estoy bastante contenta como quedo todo.

Si tienen preguntas (ahora si) pueden dejar algun comentario, y tratare de responderlas.

Tal vez para la V2 haga un sistema de respuestas in-line, para contestar comentarios específicos. Por ahora, con esto me alcanza 🙂

Espero que les haya servido!