Démarrer avec les fonctions sans serveur

​

Conditions préalables

• Un compte Content Hub Entreprise ou un compte CMS sandbox développeur.
• L’ILC HubSpot (dernière version recommandée), qui devra être installée et authentifiée avec le compte que vous utilisez. Pour vérifier quels comptes sont authentifiés, vous pouvez exécuter hs accounts list. En savoir plus sur les premiers pas avec le développement local.

​

1. Créer un projet local

• Dans le terminal, accédez au répertoire dans lequel vous stockerez votre projet à l’aide de la commande cd.

cd Documents/Dev/serverless-function-project

• Exécutez hs project create pour créer un nouveau projet.

hs project create

• Suivez les invites du terminal pour créer votre projet. Pour le modèle, sélectionnez Créer un projet vide (pas de modèle).

• Accédez au nouveau répertoire du projet à l’aide de la commande cd. Par exemple, si vous avez nommé votre projet mon nouveau projet :

cd my-new-project

​

2. Ajouter une fonction sans serveur au projet

• app/app.json : le fichier de configuration de l’application.
• app/app.functions : le répertoire des fonctions sans serveur. Vous pouvez utiliser le nom de votre choix, tant qu’il se termine par .functions.
• app/app.functions/function.js : le code JavaScript qui sera exécuté lors de l’appel de la fonction.
• app/app.functions/serverless.json : le fichier de configuration de la fonction sans serveur.
• app/app.functions/package.json : inclut les dépendances nécessaires.

• Copiez l’exemple de code ci-dessous dans vos fichiers locaux respectifs app.json, function.js, serverless.json et package.json. Sous chaque bloc de code .json, vous trouverez également un tableau contenant les définitions des champs.

{
  "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"
  }
}

• Après avoir ajouté le code ci-dessus, enregistrez vos modifications.

​

3. Charger le projet sur HubSpot

• Dans le terminal, exécutez hs project upload.

hs project upload

• Confirmez que vous souhaitez créer le projet dans le compte. Vous n’aurez pas besoin de le confirmer une fois la création initiale terminée. Le terminal affichera l’état actuel des étapes de création et de déploiement au fur et à mesure de leur progression.
• Une fois le chargement terminé, exécutez hs project open pour afficher le projet dans HubSpot.

hs project open

​

4. Tester la fonction

• <domain> : vous pouvez utiliser n’importe quel domaine connecté au compte. Par exemple, si siteweb.com et sous-domaine.brand.com sont tous deux connectés au compte, vous pouvez appeler la fonction en utilisant https://website.com/hs/serverless/<path> ou https://subdomain.brand.com/hs/serverless/<path>.
• <endpoint-path-from-config> : la valeur dans le champ path dans serverless.json.

​

5. Appeler la fonction depuis une page de site web

• Dans votre environnement local, créez un nouveau répertoire pour contenir votre modèle de page. Pour les besoins de ce tutoriel, créez ce répertoire en dehors du répertoire de projet créé par hs project create.
• Dans le terminal, accédez à ce répertoire à l’aide de la commande cd.

cd Documents/Dev/serverless-page

• Exécutez hs create template "serverless-template" pour créer un nouveau modèle nommé serverless-template.

hs create template "serverless-template"

• Sélectionnez le type de modèle de page.
• Ouvrez le fichier de modèle de page que vous venez de créer dans votre éditeur, puis remplacez le code du boilerplate par le code ci-dessous. Veillez à remplacer <domain> dans la fonction l’URL de point de terminaison (fetch('http://<domain>/hs/serverless/fetch-quote')) par un domaine connecté à votre compte 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>

• Enregistrez le fichier, puis exécutez hs upload pour le charger dans HubSpot. Suivez les invites du terminal pour sélectionner la source locale et le chemin de destination. Pour ce didacticiel, appuyez simplement sur Entrée pour chaque requête afin d’utiliser les chemins par défaut.

• Accédez au tableau de bord des pages du site web de votre compte HubSpot en exécutant la commande hs open website-pages.

hs open website-pages

• Dans votre navigateur, cliquez sur Créer dans l’angle supérieur droit pour créer une nouvelle page.
• Dans la boîte de dialogue, sélectionnez un domaine à utiliser, puis attribuez un nom de page. Le domaine de la page devra correspondre au domaine que vous utilisez pour appeler la fonction sans serveur afin d’éviter les erreurs d’origine croisée (CORS). Vous pouvez sélectionner ce domaine dans le menu déroulant ou mettre à jour l’URL du point de terminaison dans le code de modèle de page (fetch('http://<domain>/hs/serverless/fetch-quote')) pour utiliser le domaine que vous sélectionnez lors de cette étape.
• Cliquez sur Créer une page.
• Sur l’écran de sélection de modèle, recherchez votre nouveau modèle. Vous pouvez utiliser le libellé ou le nom de fichier pour rechercher le modèle (par exemple, « Page d’exemple de fonction sans serveur »). Le modèle apparaîtra dans Autres modèles, car il ne fait pas partie d’un thème.

• Cliquez sur Sélectionner un modèle.
• Dans l’éditeur de page, cliquez sur Aperçu dans l’angle supérieur droit.

• Cliquez sur Ouvrir dans un nouvel onglet.

​

Étapes suivantes

• Inclure l’authentification dans une requête pour effectuer des appels aux API de HubSpot ou à d’autres API authentifiées par des tiers.
• Implémenter le bouton et le code JavaScript dans un module plutôt que de les coder en dur dans le modèle de page. Cela vous donnerait une option plus portable, permettant à la fonction d’être appelée à partir de n’importe quelle page à laquelle le module est ajouté. Pour ce faire, vous devez créer un module, puis ajouter le HTML dans le fichier module.html du module et le JavaScript dans le fichier 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);
    });
});