Comenzar a usar las funciones sin servidor

​

Requisitos previos

• Tener una cuenta con una suscripción a Content Hub Enterprise o una cuenta de entorno de pruebas del CMS.
• La CLI de HubSpot (se recomienda la última versión), deberá estar instalada y autenticada con la cuenta que estés utilizando. Para comprobar qué cuentas están autenticadas, puedes ejecutar hs accounts list. Más información en los primeros pasos con el desarrollo local

​

1. Crear una nueva carpeta de proyecto

• En el terminal, navega hasta el directorio donde guardarás tu proyecto utilizando el comando cd.

cd Documents/Dev/serverless-function-project

• Ejecuta hs project create para crear una propiedad nueva.

hs project create

• Sigue los prompts del terminal para crear tu proyecto. Para la plantilla, selecciona Crear un proyecto vacío (sin plantilla).

• Navega hasta el directorio del nuevo proyecto utilizando el comando cd. Por ejemplo, si llamas a tu proyecto mi nuevo proyecto:

cd my-new-project

​

2. Añade una función sin servidor al proyecto

• app/app.json: el archivo de configuración de la aplicación.
• app/app.functions: el directorio de funciones sin servidor. Puedes utilizar el nombre que quieras, siempre que termine en .functions.
• app/app.functions/function.js: el código JavaScript que se ejecutará cuando se invoque la función.
• app/app.functions/serverless.json: el archivo de configuración de la función sin servidor.
• app/app.functions/package.json: incluye las dependencias necesarias.

• Copia el código de ejemplo que aparece a continuación en tus respectivos archivos locales app.json, function.js, serverless.json, y package.json. Debajo de cada bloque de código .json, también encontrarás una tabla con definiciones de campos.

{
  "name": "Serverless function app",
  "description": "This app runs a serverless function to fetch a quote using the Zen Quotes API.",
  "scopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
  "uid": "serverless-function-app",
  "public": false
}

const axios = require("axios");

exports.main = async context => {
  try {
    // Make GET request to the ZenQuotes API
    const response = await axios.get("https://zenquotes.io/api/random");

    // Extract the quote data (first item in the array)
    const quoteData = response.data[0];

    // Log the quote and author to console
    console.log(`"${quoteData.q}" — ${quoteData.a}`);

    // Return a properly formatted response with status code and body
    return {
      statusCode: 200,
      body: quoteData,
      headers: {
        "Content-Type": "application/json",
      },
    };
  } catch (error) {
    // Handle any errors that occur during the request
    console.error("Error fetching quote:", error.message);

    // Return an error response
    return {
      statusCode: 500,
      body: { error: "Failed to fetch quote" },
      headers: {
        "Content-Type": "application/json",
      },
    };
  }
};

{
  "appFunctions": {
     "quote-function": {
      "file": "function.js",
      "secrets": [],
      "endpoint": {
        "path": "fetch-quote",
        "method": ["GET"]
       }
    }
  }
}

{
  "name": "example-serverless-function",
  "version": "0.1.0",
  "author": "HubSpot",
  "license": "MIT",
  "dependencies": {
    "@hubspot/api-client": "^7.0.1",
    "axios": "^0.27.2"
  }
}

• Después de añadir el código anterior, guarda los cambios.

​

3. Subir el proyecto a HubSpot

• En la terminal, ejecuta hs project upload.

hs project upload

• Confirma que quieres crear el proyecto en la cuenta. No necesitarás confirmarlo de nuevo después de la creación inicial. El terminal mostrará el estado actual de los pasos de compilación y despliegue a medida que avanzan.
• Una vez que la subida se haya completado, ejecuta hs project open para ver el proyecto en HubSpot.

hs project open

​

4. Probar la acción

• <domain>: puedes utilizar cualquier dominio conectado a la cuenta. Por ejemplo, si tanto el sitio web.com como el subdominio.marca.com están conectados a la cuenta, podrías llamar a la función utilizando https://website.com/hs/serverless/<path> o https://subdomain.brand.com/hs/serverless/<path>.
• <endpoint-path-from-config>: el valor del campo path en serverless.json.

​

5. Invocar la función desde una página web

• En tu entorno local, crea un nuevo directorio que contenga la plantilla de la página. A efectos de este tutorial, crea este directorio fuera del directorio del proyecto creado por hs project create.
• En el terminal, navega hasta ese directorio utilizando el comando cd.

cd Documents/Dev/serverless-page

• Ejecuta hs create template "serverless-template" para crear una nueva plantilla llamada serverless-template.

hs create template "serverless-template"

• Selecciona el tipo de plantilla de la página.
• Abre el archivo de plantilla de la página recién creado en tu editor y luego, sustituye el código de la plantilla por el código que aparece a continuación. Asegúrate de sustituir <domain> en la URL del endpoint de la función (fetch('http://<domain>/hs/serverless/fetch-quote')) por un dominio que esté conectado a tu cuenta de HubSpot.

<!--
    templateType: page
    label: Serverless function example template
    isAvailableForNewContent: true
-->
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{ content.html_title }}</title>
    <meta name="description" content="{{ content.meta_description }}" />
    {{ standard_header_includes }}
  </head>
  <body>
    {% module "page_template_logo" path="@hubspot/logo" label="Logo" %}
    <!-- Button to fetch quote via serverless function -->
    <div class="serverless-container">
      <h2>Get quote</h2>
      <p class="subtitle">Click the button to fetch and display a quote.</p>
      <button id="data-button" type="button">Get quote!</button>
      <div id="data-container">
        <p class="data"></p>
      </div>
    </div>
    <!-- End button section -->

    {{ standard_footer_includes }}

    <!-- JavaScript that invokes the serverless function
     and adds returned data into the "data" text element -->
    <script>
      const dataButton = document.getElementById("data-button");
      const dataContainer = document.getElementById("data-container");

      dataButton.addEventListener("click", function (e) {
        console.log("Button clicked!");

        // Show loading state
        dataContainer.innerText = "Loading...";
        // Replace <domain> with your own domain
        fetch("http://<domain>/hs/serverless/fetch-quote")
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! Status: ${response.status}`);
            }
            // Parse the JSON response
            return response.json();
          })

          .then(data => {
            console.log("Raw data received:", data);

            // Clear container
            dataContainer.innerText = "";

            // Create the paragraph element
            const newDataElement = document.createElement("p");
            newDataElement.innerText = `"${data.q}" — ${data.a}`;
            dataContainer.appendChild(newDataElement);
          });
      });
    </script>
  </body>
</html>

• Guarda el archivo, luego ejecuta hs upload para subirlo a HubSpot. Sigue las indicaciones del terminal para seleccionar la ruta local de origen y de destino. Para este tutorial, basta con que pulses Introducir en cada prompt para utilizar las rutas predeterminadas.

• Navega al panel de páginas web de tu cuenta de HubSpot ejecutando el comando hs open website-pages.

hs open website-pages

• En tu navegador, haz clic en Crear en la parte superior derecha para crear una nueva página.
• En el cuadro de diálogo, selecciona un dominio para utilizarlo y luego, asigna un nombre de página. El dominio de la página tendrá que coincidir con el dominio que estás utilizando para invocar la función sin servidor para evitar errores de origen cruzado (CORS). Puedes seleccionar ese dominio en el menú desplegable o actualizar la URL del endpoint en el código de la plantilla de la página (fetch('http://<domain>/hs/serverless/fetch-quote')) para utilizar el dominio que selecciones en este paso.
• Haz clic en Crear página.
• En la pantalla de selección de plantillas, busca tu nueva plantilla. Puedes utilizar la etiqueta o el nombre del archivo para buscar la plantilla (por ejemplo, “Página de ejemplo de función sin servidor”). La plantilla aparecerá en Otras plantillas, ya que no forma parte de un tema.

• Haz clic en Seleccionar plantilla.
• En el editor de páginas, haz clic en Vista previa en la parte superior derecha.

• Haz clic en Abrir en una nueva pestaña.

​

Próximos pasos

• Incluir la autenticación en una solicitud para realizar llamadas a las API de HubSpot o a otras API autenticadas de terceros.
• Implementar el botón y el código JavaScript en un módulo en lugar de codificarlo en la plantilla de la página. Esto te daría una opción más portátil, permitiendo invocar la función desde cualquier página a la que se añada el módulo. Para ello, debes crear un módulo, añadir el HTML en el archivo module.html del módulo y el JavaScript en el archivo module.js.

<div class="serverless-container">
  <h2>Get quote</h2>
  <p class="subtitle">Click the button to fetch and display a quote.</p>
  <button id="data-button" type="button">Get quote!</button>
  <div id="data-container">
    <p class="data"></p>
  </div>
</div>

const dataButton = document.getElementById("data-button");
const dataContainer = document.getElementById("data-container");

dataButton.addEventListener("click", function (e) {
  console.log("Button clicked!");

  // Show loading state
  dataContainer.innerText = "Loading...";

  fetch("http://meowmix-2272014.hs-sites.com/hs/serverless/fetch-quote")
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      // Parse the JSON response
      return response.json();
    })

    .then(data => {
      console.log("Raw data received:", data);

      // Clear container
      dataContainer.innerText = "";

      // Create the paragraph element
      const newDataElement = document.createElement("p");
      newDataElement.innerText = `"${data.q}" — ${data.a}`;
      dataContainer.appendChild(newDataElement);
    });
});