Creación de sitios web potentes con desarrollo de CMS basado en servidor

Elegir las herramientas adecuadas para crear un sitio web para su organización es esencial, pero puede resultar difícil encontrar la adecuada. Los creadores de sitios simples como Wix y Squarespace son fáciles de usar para los especialistas en marketing, pero limitan gravemente a los desarrolladores a la hora de personalizar la funcionalidad del sitio. WordPress es un sistema de gestión de contenidos (CMS) más robusto, pero requiere complementos torpes con actualizaciones poco frecuentes y posibles problemas de seguridad.

Otras herramientas de creación de sitios, como Gatsby o Hexo, son fáciles de usar para los desarrolladores, pero hacen que sea muy difícil para los creadores de contenido sin experiencia técnica realizar incluso actualizaciones simples por su cuenta. Estas herramientas a menudo no satisfacen las necesidades de los grandes equipos creativos que ejecutan sitios web corporativos.

Pero hay una opción que soluciona para ambos públicos. CMS Hub de HubSpot es un sistema de gestión de contenidos impulsado por una plataforma CRM completa que permite a los desarrolladores crear funciones avanzadas y a los especialistas en marketing realizar actualizaciones y publicar contenido por su cuenta.

Una de las características que CMS Hub ofrece a los desarrolladores es la capacidad de crear funciones sin servidor. Estas funciones permiten mejorar la funcionalidad backend de un sitio web con complementos integrados que son mucho más fáciles de desarrollar, implementar y mantener que los complementos de WordPress de terceros.

A lo largo de este artículo, verás de forma práctica cómo las funciones sin servidor de HubSpot te ayudan a crear sitios web personalizados que a los clientes les encantan. Para proporcionar una vista previa súper rápida de lo que es posible, recuperaremos datos de noticias utilizando funciones GET que podrían usarse para completar una página web dinámica. Necesitará saber algo de JavaScript para seguir adelante.

Funciones sin servidor de HubSpot

La arquitectura sin servidor permite a los desarrolladores crear y ejecutar aplicaciones y servicios sin administrar la infraestructura del servidor. No necesita aprovisionar, escalar y mantener servidores ni instalar y administrar bases de datos para alojar y servir sus aplicaciones web. Cuando su negocio crece, es mucho más fácil escalarlo.

Las funciones sin servidor de HubSpot son tan poderosas como los complementos de WordPress. Son capaces de interactuar con la plataforma CRM de HubSpot, así como de integrarse con servicios de terceros a través de API. Puede utilizar funciones sin servidor para mejorar su sitio, por ejemplo:

• Obtener datos y almacenarlos en HubDB o HubSpot CRM
• Integrar su sitio web con servicios de terceros como Google Forms
• Creación de sistemas de registro de eventos.
• Envío de formularios que envían datos a otros servicios

El código de las funciones se almacena en el sistema de archivos del desarrollador y se accede a él desde la interfaz de usuario (UI) de Design Manager o la interfaz de línea de comandos (CLI). Puedes usar la CLI para generar y editar el código localmente usando tus herramientas de desarrollo local preferidas y luego cargar estos cambios en HubSpot.

Para probar la función sin servidor de ejemplo en la siguiente sección, debe tener acceso a una cuenta CMS Hub Enterprise o registrarse para obtener una cuenta de prueba de desarrollador gratuita. Implementaremos funciones sin servidor en un sitio creado según CMS Boilerplate.

(Si no estás familiarizado con el desarrollo de HubSpot, quizás quieras consultar la guía de inicio rápido antes de seguir los ejemplos a continuación).

Obtención de datos de noticias mediante solicitudes GET

Comenzamos implementando una función sin servidor que envía una solicitud GET a una API REST de terceros para obtener los datos de noticias más recientes utilizando el cliente Axios. Esta API busca artículos de noticias en línea que mencionan la palabra clave “HubSpot”.

Nota: Usaremos una API de terceros disponible en NewsAPI.org para recuperar datos de noticias, por lo que primero deberá registrarse para obtener su clave API.

Las API que requieren autenticación o utilizan claves API no son seguras para la interfaz de un sitio web, ya que exponen sus credenciales. Las funciones sin servidor son una buena solución como intermediario, ya que mantiene sus credenciales en secreto.

Dirígete a una CLI y ejecuta los siguientes comandos:

cd local-cms-devmkdir myfunctionshs create function 

Primero, navegamos a nuestro proyecto CMS local y llamamos al comando hs create function para generar una función repetitiva simple.

Se le solicitará información sobre sus funciones, como por ejemplo:

• Nombre de la carpeta donde se creará su función. Ingrese a mis funciones/obtenga noticias.
• Nombre del archivo JavaScript para su función. Ingrese a obtener noticias.
• Seleccione el método HTTP para el punto final. Seleccione OBTENER.
• Parte de la ruta de la URL creada para la función. Ingrese a obtener noticias.

Debería recibir un mensaje que indique que se ha creado una función para el punto final “/_hcms/API/getnews”. Esto significa que, una vez cargada, nuestra función estará disponible desde el punto final /_hcms/API/getnews.

Antes de cargar la función, primero implementemos la funcionalidad deseada.

Abra el archivo myfunctionsgetnews.functiongetnews.js. Encontrarás un código repetitivo para una función sin servidor que envía una solicitud GET a la API de búsqueda de HubSpot. Elimina el código repetitivo y deja solo el siguiente código actualizado:

const axios = require('axios');const API_KEY = 'YOUR_API_KEY_HERE';exports.main = async (_, sendResponse) = {   };

Tenga en cuenta que normalmente debe agregar su clave API a través del comando hs secrets de la interfaz de línea de comandos, pero agregarla aquí es suficiente para demostrar la función.

Requerimos que la biblioteca Axios envíe solicitudes HTTP y exportamos una función principal que ejecuta HubSpot cuando se realiza una solicitud al punto final asociado. También definimos una variable API_KEY que contiene la clave API de la API de noticias.

A continuación, dentro del cuerpo de la función principal, agregue el siguiente código:

const response = await axios.get(`https://newsapi.org/v2/everything?q=HubSpotsortBy=popularityapiKey=${API_KEY}`);sendResponse({ body: { response: response.data }, statusCode: 200 });

Llamamos a Axios para enviar una solicitud GET al punto final de la API, luego llamamos al método sendResponse para enviar los datos recuperados al cliente. Podríamos llamar a esta API directamente desde el código de la interfaz, pero necesitaríamos exponer nuestra clave API, que debería ser secreta. Gracias a la función sin servidor, la obtención de datos se realiza en el lado del servidor, por lo que no tenemos que exponer el secreto.

Finalmente, ejecute el siguiente comando para cargar su función:

hs upload myfunctions myfunctions

Este comando carga archivos desde la carpeta local myfunctions a una carpeta myfunctions (que se creará) en el Administrador de diseño de su cuenta.

Finalmente, ejecute el método visitando el punto final /_hcms/API/getnews con su navegador web. En nuestro caso, debemos visitar este enlace. Aquí deberías ver una lista de artículos de noticias sobre HubSpot, aunque sin ningún diseño de interfaz.

Si bien está más allá del alcance de este artículo, nuestro siguiente paso sería tomar los datos de NewsAPI y crear una plantilla que nos permita generar los resultados de las noticias en una página web dinámica. Y con esto, tendremos un lugar donde cualquiera podrá ponerse al día rápidamente con las últimas noticias que mencionen HubSpot o cualquier otra palabra clave que decida incluir.

Próximos pasos

Cuando necesite un sitio web pequeño basado en folletos y no vaya a realizar muchas actualizaciones, cualquier CMS le servirá. Sin embargo, cuando buscas crear experiencias digitales avanzadas para hacer crecer tu organización, CMS Hub de HubSpot ofrece la funcionalidad y flexibilidad que necesitas. Además, puede trabajar con sus herramientas preferidas y flujos de trabajo modernos, como CLI, entornos de desarrollo integrados (IDE) y GitHub.

Con suerte, este artículo ha brindado una idea inicial de lo que es posible con las funciones sin servidor de HubSpot. Pero no te detengas aquí, sumérgete y experimenta agregando funcionalidad personalizada a tu propio sitio web con tecnología de HubSpot. Tu imaginación es el límite. Regístrese para obtener una cuenta de prueba de desarrollador gratuita para comenzar.

Otras lecturas:

• HubSpot frente a WordPress
• Arquitecturas sin servidor
• Funciones sin servidor de HubSpot

---

Ahmed Bouchefra es desarrollador y autor técnico con un diploma BAC + 5 en desarrollo de software. Ahmed crea aplicaciones y crea contenido técnico sobre JavaScript, Angular, Ionic y más.