Datos serializados a JSON con Unserialize.dev

¿Has trabajado en una base de datos y encuentras datos serializados que necesitas leer rápidamente?

Solo queremos leer esos datos. No más. Entonces hay que hacer uso de herramientas en línea que hacen unserialize de esos datos.

Sin embargo, esas herramientas en línea para convertir datos serializados con unserialize carecen de funcionalidades 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.

Esta falta de funcionalidades fue la razón la cual me hizo desarrollar Unserialize.dev.

A continuación te muestro qué es Unserialize.dev y qué tecnologías hay detrás de ese proyecto.

¿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.

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.