¿Por qué Unserialize.dev?

Desde que empecé a trabajar con WordPress me daba cuenta que iba a la base de datos del sitio para ver datos una y otra vez. Sin embargo, era algo tedioso cuando estos datos venían serializados.

Los datos serializados si pueden leerse pero te quita mucho tiempo en comprender el contenido del mismo. Así que usé distintas herramientas que convirtieran esos datos serializados a un formato más legible.

Estas herramientas solucionaban mi problema digamos que en un 60%, sí podía ver los datos serializados más legibles, sin embargo, carecían de ciertas funcionalidades imprescindibles para estos tiempos:

• Conversión a formato JSON.
• Habilidad para copiar y pegar la conversión.
• Habilidad para exportar como imagen.
• Bonito diseño al mostrar el JSON.

La falta de funcionalidades, como se mostró en la lista anterior y otras cosas más, fue lo que me hizo desarrollar Unserialize.dev.

¿Qué es Unserialize.dev?

Es una herramienta, para desarrolladores, que convierte datos serializados en formato JSON o Array.

Características

Con Unserialize.dev puedes:

• Convertir los datos serializados a formato JSON o Array.
• Copiar el JSON o Array en tu portapapeles.
• Exportar la respuesta como imagen.
• Guardar las respuestas en una base de datos remota (en caso que quieras acceder a la información después).

Demo: ¡Convierte datos serializados a JSON!

He grabado un video mostrándote cada una de las características de la aplicación:

¿Cómo funciona Unserialize.dev?

En el siguiente diagrama de flujo te muestro lo que sucede cuando haces click en el botón “Unserialize”:

Tecnologías

De acuerdo al diagrama de flujo anterior, te explicaré cuáles son las tecnologías que hay detrás de Unserialize.dev:

PHP/WordPress

Utilizo WordPress como backend. He creado un plugin para WordPress que registra una ruta API en este sitio web. Cuando se le envían los datos, los valida y si todo sale bien, procede a ejecutar la función unserialize() de PHP. Al final, hace el formateado para JSON o Array y retorna la respuesta al cliente.

Vue/Nuxt

Toda la interacción del usuario con el cliente está desarrollado con el framework Nuxt con las siguientes dependencias:

{
   "devDependencies": {
      "@nuxtjs/tailwindcss": "^6.6.6",
      "@tailwindcss/forms": "^0.5.3",
      "nuxt": "^3.4.1",
      "nuxt-gtag": "^0.5.4"
   },
   "dependencies": {
      "@headlessui/vue": "^1.7.13",
      "@heroicons/vue": "^2.0.17",
      "@nuxtjs/google-fonts": "^3.0.0",
      "@supabase/supabase-js": "^2.20.0",
      "clipboard": "^2.0.11",
      "dom-to-image": "^2.6.0",
      "luxon": "^3.3.0"
   }
}

Cloudflare Pages

Utilizo Cloudflare Pages para hostear la aplicación Nuxt de forma gratuita. Simplemente tengo mi código en GitHub, hago algún deploy a la rama main y el sitio se actualiza por si solo.

Supabase

Para guardar las respuestas en una base de datos quise probar Supabase, ya que todo mundo hablaba bastante bien sobre él. Y la verdad es que concuerdo, debido a su simple integración con las aplicaciones.

Tailwind CSS

Para los estilos utilizo Tailwind CSS y Tailwind UI. No hay más que agregar, me gusta para sacar prototipos rápidos.

Syntax Highlighting

Como puedes ver, la respuesta JSON se ve bien formateada gracias a Torchlight, la cual es una API donde envías código y te retorna un bloque de código formateado correctamente. Es gratuito para proyectos open source.

¿Qué sigue para Unserialize.dev?

La idea más probable que se integre en un futuro en Unserialize.dev es:

Comparación de datos

Tengo pensado una nueva funcionalidad donde puedas comparar dos respuestas y te muestre qué ha cambiado de una versión a otra.

Gracias

Gracias por llegar hasta aquí.

Este proyecto fue divertido, soluciona varios problemas que encontraba en otras aplicaciones web. Además, siempre es bueno probar nuevas herramientas, aporta más conocimiento.

Espero que esta herramienta te pueda servir también.

Si gustas, puedes votar la aplicación en Product Hunt o invitarme un café.