Estructura del artículo

• Introducción: ¡He graduado de mi era de muggle tecnológico!
• Puntos de dolor y soluciones en el acortamiento de URLs
• Donde ocurrió la magia: Mi proceso de Vibe Coding
  1. ¡Simplemente lanza un prompt primero!
  2. ¡Usa el propio hechizo de la IA contra ella! Analizando la respuesta de Claude
  3. ¿A un clic de distancia? Configurando la base de datos MongoDB
  4. ¡Conecta! Configura las variables entre la base de datos y el código
  5. ¡Depura! ¡Depura! ¡Depura!
• Reflexiones de un principiante en Vibe Coding
• Referencias

Introducción: ¡He graduado de mi era de muggle tecnológico!

El 21 de marzo de 2025, oficialmente dejé atrás mi identidad de “novato tecnológico”, crucé las puertas de la Vibe Coding Academy y ¡me convertí en un mago de la programación con IA! ... El objetivo de todo este proyecto surgió cuando, al organizar enlaces externos de diferentes canales de marketing en mi empresa, me di cuenta de que no existía ninguna herramienta que ofreciera tanto “URLs de marca completamente personalizadas” como “procesos de seguimiento simplificados”. De hecho, no solo yo me encontré con este problema en mi primer trabajo de marketing B2B, sino que muchos marketers digitales suelen enfrentarse a los mismos retos.

En el pasado, por la falta de conocimientos técnicos como redirecciones DNS y la ausencia de herramientas MarTech (tecnología de marketing) adecuadas para facilitar la creación de soluciones propias, estos problemas normalmente requerían el apoyo del equipo técnico. Para alguien sin experiencia en programación, desarrollar una “herramienta personalizada” que cubriera necesidades concretas era casi un sueño; solo quedaba conformarse con las soluciones existentes. ... Sin embargo, gracias a herramientas colaborativas de IA como Cursor y Claude, y a plataformas low-code como ++Zeabur++, incluso quienes no tienen experiencia en programación pueden completar todo el desarrollo y despliegue en poco tiempo.

Probé a desarrollar un ++acortador de URLs totalmente personalizado++ usando la plantilla de Zeabur. Durante el proceso, utilicé Claude AI para generar código, almacené los datos de URLs en MongoDB y lo desplegué en Zeabur con un solo clic. En apenas 2-3 horas, ya tenía una pequeña herramienta funcional que resolvía eficazmente los puntos de dolor iniciales.

Puntos de dolor y soluciones en el acortamiento de URLs

Antes de entrar en detalles, hablemos de dos grandes desafíos de los servicios de acortamiento de URLs existentes:

1. Imposibilidad de personalizar totalmente los dominios

... La mayoría de los servicios de acortamiento de URLs siguen llevando el branding de la plataforma. Por ejemplo, el más conocido, Bitly, no resulta lo suficientemente puro para el marketing de marca (o para alguien como yo, con TOC, que no tolera ni un grano de arena en su trabajo, jaja).

Yo quería usar un dominio totalmente personalizado como ++https://deploy.zeabur.app/buildtemplate++.

2. Funcionalidades de gestión de enlaces

• Aunque estos servicios ofrecen analíticas básicas, los marketers aún necesitan recurrir a herramientas adicionales como Google Sheets para gestionar parámetros UTM, y Campaign Builder para crear enlaces rastreables.
• Este proceso no solo es muy fragmentado, sino que también puede afectar la precisión de los datos debido a errores humanos. ... Para integrar las tres funciones clave de las URLs: Generar, Gestionar y Rastrear, pasé 3 horas conversando con Claude para desarrollar un generador de URLs cortas que permite personalizar el dominio e incluye un mecanismo básico de seguimiento de datos. Así, los usuarios pueden almacenar datos de redirección en MongoDB y ver la efectividad de los enlaces cortos desde el panel de administración.

Donde ocurrió la magia: Mi proceso de Vibe Coding

1. ¡Simplemente lanza un prompt primero!

Durante el desarrollo, no programé nada; en su lugar, fui generando la lógica necesaria a través del diálogo con Claude AI.

P.D.: No tenía experiencia en desarrollo con Node.js, mucho menos conectando o configurando bases de datos.

2. ¡Usa el propio hechizo de la IA contra ella! Analizando la respuesta de Claude

Después, pasé el código a GPT para entender la lógica detrás del código de Claude: ... - Lógica de acortamiento de URLs: Claude implementó un método crypto.randomBytes(3).toString('hex') que crea un ID aleatorio de 6 caracteres para la URL acortada, asegurando baja probabilidad de colisiones.

• Diseño del modelo MongoDB: Usando mongoose, configuré el esquema para shortUrl y originalUrl, permitiendo a la aplicación almacenar y consultar información de URLs.
• Gestión de redirecciones y actualización de clics: Se creó una API que busca automáticamente los registros en MongoDB y redirige cada vez que se accede a la URL corta, actualizando a la vez los datos de clics.
• Diseño de rutas en Express: app.post("/shorten") permite a los usuarios enviar URLs mientras que app.get("/:shortId") gestiona las solicitudes de redirección, formando una API completa.
• Gestión de errores y seguridad: La IA también ayudó a añadir lógica de manejo de errores, como comprobaciones de formato de URL y respuestas para URLs cortas inexistentes, asegurando la estabilidad del sistema.

... Una vez aclarada la lógica, entré al Dashboard, seleccioné el servidor, elegí desplegar desde Github ¡y puse el código online!

3. ¿A un clic de distancia? Configurando la base de datos MongoDB

Con el código listo, empecé a investigar cómo completar el resto de la configuración para que el código funcionara. Nunca estudié gestión de bases de datos en la universidad, así que no tenía ni idea de cómo manejar los entornos y la configuración. Busqué y descubrí que Zeabur ofrece plantillas oficiales para bases de datos.

Hice clic en Deploy, seleccioné el servidor ¡y la base de datos se creó directamente! (El dashboard redirigió tan rápido que ni siquiera me dio tiempo a dejar mi taza sobre la mesa)

4. ¡Conecta! Configura las variables entre la base de datos y el código

... Una vez configurado el backend del proyecto, fui a la sección “Variable” para añadir la clave y el valor de la variable de entorno de MongoDB, ¡y el código empezó a funcionar!

5. ¡Depura! ¡Depura! ¡Depura!

Pensé que todo estaba perfecto, pero de repente el primer intento de conexión falló. Al revisar los logs de ejecución (llenos de errores en rojo), me di cuenta de que había cometido un error de nomenclatura de lo más tonto, jaja, del que ni me había percatado.

El código que subí a Github estaba completamente desordenado en cuanto a nombres y jerarquía, lo que provocó que no se pudieran llamar las funciones correctamente.

Tras varios ajustes, ¡por fin el código funcionó a la perfección! (Hasta lo anuncié en el canal del equipo) ...

Reflexiones de un principiante en Vibe Coding

Aunque este acortador de URLs sigue en una fase muy inicial de MVP, en mi imaginación (y en mi búsqueda de un flujo de trabajo extremadamente ágil), tiene un potencial enorme de escalabilidad. En el futuro, espero desarrollar aún más esta herramienta:

• Gestión integrada: Permitir que los enlaces se generen y gestionen desde una sola interfaz, consolidando además la biblioteca de UTM.
• Análisis de datos: Integrar Google Data Studio u otras herramientas de visualización de datos para obtener insights más detallados.
• Funcionalidad de pruebas A/B: Permitir que diferentes versiones de la URL corta redirijan a distintas páginas, probando el rendimiento de los materiales de marketing.

Esta experiencia con Vibe Coding me ha hecho darme cuenta de que incluso sin experiencia técnica, es posible usar IA y plataformas low-code como Zeabur para crear tus propias herramientas de marketing digital y lograr la automatización del marketing. Estoy deseando explorar más casos de uso con Zeabur. ¡Esto realmente muestra a los marketers una nueva forma de resolver problemas, creando tus propias soluciones MarTech personalizadas y a medida!

Referencias

• Revisión del generador de URL cortas, evitando la función de URL cortas duplicadas
• Los enlaces de Google URL Shortener ya no estarán disponibles
• Generador de URL cortas - Notas de Implementación
• Documentación Oficial de MongoDB