HubSpot es una gran herramienta para crear sitios web. Permite a los desarrolladores crear partes personalizadas, llamadas módulos. Los equipos de marketing pueden usar estos módulos fácilmente para construir páginas web con solo arrastrar y soltar.
Pero construir muchos de estos módulos lleva mucho tiempo. Puede volverse muy aburrido porque los desarrolladores tienen que escribir exactamente el mismo tipo de código una y otra vez. Tienen que escribir largos archivos de configuración, crear el HTML y asegurarse de que todo se vea bien en todos los dispositivos.
Hoy en día, muchos desarrolladores están usando herramientas de IA como ChatGPT o GitHub Copilot para trabajar más rápido. La IA no es perfecta. No puede hacer todo por ti. Pero, si la usas de forma inteligente, puede ahorrarte horas de trabajo aburrido.
Esta guía explica cómo los desarrolladores de HubSpot pueden usar la IA para construir módulos más rápido, manteniendo el código limpio y fácil de usar.
¿Por Qué Crear Módulos en HubSpot Tarda Tanto?
HubSpot te da mucho poder, pero también hace que los desarrolladores tengan mucho trabajo de configuración manual para cada módulo.
1. Escribiendo el archivo fields.json
Todo módulo necesita un archivo llamado fields.json. Este archivo le dice a HubSpot qué botones y cajas de texto mostrar al equipo de marketing. Incluso para un módulo simple, tienes que escribir el código para:
- Cajas de texto (Text boxes)
- Cargadores de imágenes (Image uploaders)
- Selectores de colores (Color pickers)
- Listas de repetición (Repeating lists)
Escribir este código para docenas de módulos tarda una eternidad y es muy fácil cometer errores de escritura.
2. Escribiendo el Código y la Lógica
HubSpot usa un lenguaje de programación llamado HubL. Los desarrolladores mezclan HubL con el HTML normal para hacer que las páginas web funcionen. Tienen que escribir los mismos bucles básicos y reglas "if" (si) todos los días. Hacer este trabajo repetitivo quita tiempo que podría usarse para resolver problemas más grandes.
3. Dejando Todo Bonito
Después de que el código básico está listo, los desarrolladores todavía tienen que escribir el CSS para que el módulo se vea bonito. Tienen que probarlo en teléfonos celulares y asegurarse de que sea fácil de usar para personas ciegas que usan lectores de pantalla. Todos estos pasos se suman.
Cómo la IA Ayuda a los Desarrolladores a Trabajar Más Rápido
La IA no puede construir un módulo perfecto de HubSpot por sí sola a partir de una simple orden. Sin embargo, es increíble para hacer la escritura aburrida y repetitiva por ti.
Generando los Archivos de Configuración
Una de las mejores formas de usar la IA es dejar que escriba tu archivo fields.json. Simplemente puedes decirle a la IA lo que necesitas con palabras sencillas. Por ejemplo, puedes decir: "Haz un archivo fields.json para una tarjeta de precios con un título, una foto y un botón."
La IA escribirá rápidamente todo el código inicial. Todavía tienes que revisarlo para asegurarte de que está bien, pero esto te salva de todo ese trabajo pesado de escritura.
Creando Fragmentos de Código Básicos
La IA es bastante inteligente cuando se trata de código HubL básico. Puede escribir rápidamente los patrones de código que usas todos los días, como:
- Escribir el código para mostrar una imagen correctamente.
- Escribir un bucle para mostrar una lista de elementos.
- Escribir una regla para esconder una caja si el usuario la deja vacía.
Generando Diseños Básicos
Muchos sitios web usan los mismos tipos de diseño, como una cuadrícula de características o una lista de reseñas de clientes. En lugar de empezar con una página en blanco, puedes pedirle a la IA que escriba el HTML básico para ti. Después, puedes intervenir y agregar el código especial de HubSpot para que funcione.
Encontrando Respuestas Rápidamente
HubSpot tiene muchas reglas. En lugar de buscar en largas páginas de manuales de instrucciones, los desarrolladores pueden simplemente hacerle una pregunta a la IA. La IA puede darte un resumen rápido y mostrarte un ejemplo del código que necesitas.
Dónde la IA Todavía Comete Errores
No puedes confiar ciegamente en la IA. Si lo haces, tu sitio web puede romperse. Necesitas saber dónde se confunde la IA.
Inventando Reglas
A veces, la IA simplemente inventa cosas. Puede intentar usar un tipo de campo que HubSpot ni siquiera soporta. Puede escribir mal una propiedad u olvidar un ID obligatorio. Un desarrollador siempre debe revisar el trabajo de la IA usando las reglas reales de HubSpot.
Lidiando con Datos Complejos
Si tu módulo necesita sacar datos complejos de una base de datos (como HubDB), la IA suele confundirse mucho. Tiene problemas para escribir búsquedas y filtros complejos. Para las cosas difíciles, los desarrolladores humanos siguen siendo mucho mejores.
No Está Lista para Usuarios Reales
La IA no sabe cómo es todo tu sitio web. Puede escribir un código que sea difícil de entender para el equipo de marketing en el editor. Un humano siempre necesita revisar el módulo y asegurarse de que sea fácil de usar antes de ponerlo en un sitio web en vivo.
La Mejor Forma de Usar la IA
Los desarrolladores inteligentes usan la IA como una asistente útil. Aquí tienes un flujo de trabajo simple, paso a paso, que funciona muy bien:
- Planea: Decide qué debe hacer tu módulo y qué campos necesita.
- Deja que la IA escriba lo básico: Pídele a la IA que escriba el archivo
fields.jsonbásico y el código HTML inicial. - Corrige los errores manualmente: Revisa el código de la IA. Corrige los errores y conecta los datos de HubSpot correctamente.
- Déjalo perfecto: Agrega tu propio estilo para que se vea hermoso en celulares y computadoras.
- Prueba: Intenta usar el módulo en HubSpot para asegurarte de que sea fácil de usar para todos.
Pensamientos Finales
La IA no le robará el trabajo a un desarrollador de HubSpot. Pero es una herramienta súper útil. Al dejar que la IA haga la escritura aburrida y la configuración básica, los desarrolladores pueden ahorrar horas de tiempo cada semana.
El secreto es saber en qué es buena la IA y saber exactamente cuándo necesitas intervenir y hacer el trabajo real.
Construir módulos de HubSpot desde cero lleva tiempo. Rapid te permite subir cualquier captura de pantalla de interfaz (UI) y genera un módulo de HubSpot completo y listo para usar (con fields.json, código HubL y estructura correcta) en menos de 60 segundos. Pruébalo gratis →