Primeros pasos con funciones sin servidor

Last updated:

Nota: si estás creando una función sin servidor como parte de un proyecto de desarrollador, visita en su lugar la documentación de la función sin servidor del proyecto de desarrollador. La siguiente documentación es para crear funciones sin servidor fuera de la plataforma del proyecto del desarrollador.

APPLICABLE PRODUCTS
  • Content Hub
    • Enterprise

Las funciones sin servidor ofrecen una manera de escribir código del lado del servidor que se relaciona con HubSpot y servicios de terceros a través de las API.  Las API que requieren autentificación no son seguras para el front-end de un sitio web, ya que tus credenciales quedarían expuestas.

 Las funciones sin servidor pueden actuar como intermediario entre los servicios front-end y back-end que requieren autenticación. Con funciones sin servidor, los desarrolladores no necesitan crear y gestionar nuevos servidores. Las funciones sin servidor requieren menos gastos y son más fáciles de escalar a medida que un negocio crece. Tenemos un resumen de alto nivel de lo que son las funciones sin servidor de HubSpot y cómo funcionan, recomendamos leerlo antes de hacer este tutorial.

Este tutorial te guiará por la creación de tu primera función sin servidor.

Crearás una carpeta de funciones sin servidor, configurarás su carpeta de configuración, crearás una función y obtendrás una respuesta de ella.

Lo que debes hacer antes de tomar este tutorial:

1 1. Crear una nueva carpeta de proyecto

Abre tu archivo hubspot.config.yml y asegúrate de que tu defaultPortal esté configurado en tu cuenta de CMS Developer Sandbox o en una cuenta con CMS Hub Enterprise.

En el equipo, en la carpeta que contiene el archivo hubspot.config.yml, crea una carpeta serverless-tutorial. Esta carpeta contendrá todos nuestros archivos, tanto las propias funciones como una plantilla que utilizará la función. 

En tu terminal ejecuta el comando watch:

hs watch serverless-tutorial serverless-tutorial

Esto hará que cualquier edición en esta carpeta resulte en cargas al administrador de diseño. Dado que la carpeta actualmente no tiene contenido, este comando simplemente indicará que Watcher está listo y viendo.

2. Crear una carpeta de funciones

Dentro de la carpeta serverless-tutorial crea una carpeta my-first-function.functions.
Esto es similar a las carpetas de módulos personalizados que terminan en .module. .functions sirve para comunicar que la carpeta contiene funciones sin servidor. Los archivos almacenados en esta carpeta no son de acceso público.

Debido a que esta carpeta está vacía, el comando watch que tiene en ejecución aún no creará esta carpeta en el Administrador de diseño.

3. Crear un archivo de configuración

Crea un nuevo archivo en tu carpeta my-first-function.functions. Nombrarlo serverless.json. serverless.json es un archivo requerido contenido dentro de una carpeta .functions. Sirve como un archivo de configuración para funciones sin servidor. Definición del entorno de tiempo de ejecución, la versión de la función sin servidor y los puntos finales disponibles. Para un resumen de todo lo que se define en este archivo, consulta nuestra referencia sin servidor.

Si creaste y guardaste el archivo vacío, recibirás un mensaje de error en tu terminal indicando que no puedes cargar un archivo vacío serverless.json. Está bien ignorarlo porque vas a agregar ese código y luego guardarlo, activando una nueva carga que tendrá éxito.

Pega el siguiente código en tu serverless.json:

// place this in your serverless.json file, without this comment { "runtime": "nodejs18.x", "version": "1.0", "endpoints": { } }

Guarda el archivo.

Mantén este archivo abierto en tu editor de código. Volveremos a él.

Debido a que watch se está ejecutando, si actualizas tu administrador de diseño, verás tu serverless-tutorial y las carpetas my-first-function.functions y tu nuevo archivo serverless.json. 

4. Crear un archivo de función

Crea un nuevo archivo en tu carpeta my-first-function.functions, nómbralo congratulation.js

Este es el archivo de función real, el archivo que ejecutará y realizará una tarea.

Pega el siguiente código:

exports.main = (context, sendResponse) => { // your code called when the function is executed const functionResponse = "Congrats! You've just deployed a Serverless Function." // sendResponse is a callback function you call to send your response. sendResponse({body: functionResponse, statusCode: 200}); };

Esta función sin servidor cuando se ejecuta devuelve una cadena "Congrats! You just deployed a Serverless Function." y un código de estado de 200, lo que indica éxito.

En un escenario del mundo real, es probable que puedas usar API o realizar algunos cálculos que no deseas que sean públicos. Devolverías el resultado de esos cálculos o, un código de estado simple basado en el éxito de tus transacciones API.

Aún no has terminado, no hay manera de ejecutar esta función todavía.

5. Registrar tu función en tu serverless.json

Abre de nuevo tu archivo serverless.json. En tu archivo, encuentra tu objeto «endpoints».

Actualiza el objeto para que luzca de la siguiente manera:

// update the endpoints object in your serverless.json to reflect this object. "endpoints": { "congratulation": { "method": "GET", "file": "congratulation.js" } }

El objeto endpoints contiene un objeto "congratulation". "congratulation" es el punto de terminación que estás creando. El nombre del punto de terminación es lo que define la ruta que usará para llamar a tu función sin servidor.

Las funciones sin servidor se exponen a través de una ruta en el dominio de tu cuenta de HubSpot CMS.

Se puede acceder a estas funciones en: 

<https://www.example.com>/_hcms/api/<endpoint-name/path>

En el caso de este punto de terminación de "congratulation" que has creado, será 

<https://www.example.com>/_hcms/api/congratulation

Debido a esto, generalmente es una buena idea nombrar tu punto de terminación de manera similar al nombre de tu archivo de función, y ambos deben nombrarse según la información contra la que actúan, no la acción tomada contra esa información. Debes usar el método o los métodos HTTP para comunicar el tipo de acción que estás realizando contra esa información. El parámetro "method" define el método HTTP que admite tu función. Puede ser una sola cadena o una matriz de cadenas que denotan los métodos que la función admite.

6. Probar tu función

La forma más sencilla de probar una solicitud GET a tu función sin servidor es ir a la URL de tu punto de terminación directamente en el navegador.
https://your-domain.com/_hcms/api/congratulation

Reemplazar your-domain.com con el dominio de tu sitio de HubSpot.

Deberías ver "Congrats! You just deployed a serverless function".

¡Bien, lo lograste!

Si no obtienes esa respuesta, comienza desde la parte superior de este tutorial leyendo cuidadosamente cada paso y verificando el código. Es probable que las instrucciones en los pasos 4 o 5 no se hayan seguido correctamente.

Para solicitudes más complicadas, es útil usar una herramienta como Postman. Postman hace que sea más fácil probar y depurar las API. Una característica útil para los desarrolladores front-end es su generación de código que puede generar un punto de partida para tu llamada javascript a tu función.

7. Crear una plantilla básica llamando a tu función

Usando una nueva ventana de terminal navega en tu carpeta serverless-tutorial usando cd.

Ejecuta el siguiente comando en tu terminal:

hs create template "test-function"

Esto crea un archivo test-function.html. Abre este archivo en tu editor de códigos.

Arriba de la etiqueta </head> agrega <script></script>.

Copia el javascript a continuación:

var requestOptions = { 'method': 'GET', 'headers': { 'Content-Type': 'application/json', } }; fetch("https://www.example.com/_hcms/api/congratulation", requestOptions) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error));

Las funciones sin servidor de HubSpot solo admiten el tipo de contenido application/json. Dejarlo fuera ocasionará un error de "Tipo de medio no compatible".

Dentro de la etiqueta del script que has creado anteriormente, pega tu código JavaScript copiado.

Cambia www.example.com al dominio de tu cuenta.

Guarda el archivo.

8. Crear una página usando la plantilla test-function.html

En el administrador de diseño, busca tu archivo test-function.html (es posible que debas actualizar)

Haz clic con el botón derecho en el archivo, elige "crear página".

Nombra tu página "Función de prueba". Crea una página.

Haz clic en Vista preliminar, vista preliminar en una nueva ventana. 

Inspecciona la página haciendo clic con el botón derecho en cualquier lugar de la página y seleccionando "inspeccionar".

Si has hecho todo correctamente deberías ver en tu consola el mensaje de felicitaciones.

Felicitaciones, has llamado a tu función sin servidor desde una página de CMS de HubSpot. 

Si bien este tutorial te permite llamar a la función sin servidor en el nivel de plantilla, puedes llamar a las funciones sin servidor en cualquier lugar donde puedas agregar JavaScript en tu sitio alojado en CMS. El lugar más común donde puedes hacer esto es dentro de tus módulos personalizados.

Depuración de la función sin servidor

En esta etapa, tu función sin servidor debería funcionar bien. Cuanto más complicada se vuelva tu función, más difícil será solucionar el problema. Al igual que la consola en tu navegador es útil para depurar javascript en tu front-end, puedes obtener registros similares para tus funciones sin servidor usando hs logs. Echa un vistazo a la referencia de desarrollo local para obtener más información sobre este comando.

hs logs <endpoint-name> --follow

¿Qué deberías hacer?

Haz creado una carpeta de función sin servidor, con un archivo de configuración sin servidor.json y un archivo de función llamado congratulation.js. Usaste "GET" para obtener el texto de felicitaciones de la función sin servidor. Usaste javascript para hacer una llamada a tu función sin servidor desde una página en el CMS de HubSpot.

Ahora que comprendes cómo se relacionan el archivo de configuración, el archivo de función y la carpeta .functions, la CLI tiene un comando práctico que puedes usar para crear tus funciones más rápido la próxima vez.

hs create function <function name>

Esta función crea una carpeta .functions, un archivo serverless.json y un archivo de función con los nombres que proporciones.

¿Qué sigue?

¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.