Erste Schritte mit serverlosen Funktionen

​

Voraussetzungen

• Einen Content Hub Enterprise-Account oder einen CMS-Entwickler-Sandbox-Account.
• Das HubSpot-CLI (neueste Version empfohlen), das installiert und mit dem von Ihnen verwendeten Account authentifiziert werden muss. Um zu überprüfen, welche Accounts authentifiziert sind, können Sie hs accounts list ausführen. Hier erfahren Sie mehr über die ersten Schritte mit lokaler Entwicklung.

​

1. Ein Projekt lokal erstellen

• Gehen Sie im Terminal mit dem cd-Befehl zu dem Verzeichnis, in dem Sie Ihr Projekt speichern möchten.

cd Documents/Dev/serverless-function-project

• Führen Sie hs project create aus, um ein neues Projekt zu erstellen.

hs project create

• Folgen Sie den Anweisungen im Terminal, um Ihr Projekt zu erstellen. Wählen Sie für die Vorlage die Option Leeres Projekt erstellen (keine Vorlage) aus.

• Rufen Sie mit dem cd-Befehl das neue Projektverzeichnis auf. Wenn Sie Ihr Projekt z. B. Mein neues Projekt genannt haben, sieht der Befehl folgendermaßen aus:

cd my-new-project

​

2. Eine serverlose Funktion zum Projekt hinzufügen

• app/app.json: die App-Konfigurationsdatei
• app/app.functions: das Verzeichnis für die serverlose Funktion (Sie können einen beliebigen Namen verwenden, solange er auf .functions endet)
• app/app.functions/function.js: der JavaScript-Code, der ausgeführt wird, wenn die Funktion aufgerufen wird
• app/app.functions/serverless.json: die Konfigurationsdatei für die serverlose Funktion
• app/app.functions/package.json: enthält die erforderlichen Abhängigkeiten

• Kopieren Sie den nachstehenden Beispielcode in Ihre jeweiligen lokalen app.json-, function.js-, serverless.json- und package.json-Dateien. Unter jedem .json-Code-Block finden Sie außerdem eine Tabelle mit Felddefinitionen.

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

• Nachdem Sie den obigen Code hinzugefügt haben, speichern Sie Ihre Änderungen.

​

3. Das Projekt in HubSpot hochladen

• Führen Sie im Terminal hs project upload aus.

hs project upload

• Bestätigen Sie, dass Sie das Projekt im Account erstellen möchten. Sie müssen dies nach der ersten Erstellung nicht erneut bestätigen. Das Terminal zeigt den aktuellen Status der Erstellung und Bereitstellung im Verlauf an.
• Sobald der Upload abgeschlossen ist, führen Sie hs project open aus, um das Projekt in HubSpot anzuzeigen.

hs project open

​

4. Die Funktion testen

• <domain>: Sie können jede mit dem Account verknüpfte Domain verwenden. Wenn z. B. sowohl website.com als auch subdomain.brand.com mit dem Account verknüpft sind, können Sie die Funktion über https://website.com/hs/serverless/<path> oder https://subdomain.brand.com/hs/serverless/<path> aufrufen.
• <endpoint-path-from-config>: Dies ist der Wert im path-Feld in serverless.json.

​

5. Die Funktion von einer Website-Seite aus aufrufen

• Erstellen Sie in Ihrer lokalen Umgebung ein neues Verzeichnis, das Ihre Seitenvorlage enthält. Erstellen Sie für die Zwecke dieses Tutorials dieses Verzeichnis außerhalb des Projektverzeichnisses, das via hs project create erstellt wurde.
• Rufen Sie im Terminal mit dem cd-Befehl dieses Verzeichnis auf.

cd Documents/Dev/serverless-page

• Führen Sie hs create template "serverless-template" aus, um eine neue Vorlage mit dem Namen serverless-template zu erstellen.

hs create template "serverless-template"

• Wählen Sie den Vorlagentyp Seite aus.
• Öffnen Sie die neu erstellte Seitenvorlagendatei in Ihrem Editor und ersetzen Sie den Textbausteincode durch den folgenden Code. Achten Sie darauf, <domain> in der URL des Endpunkts der Funktion (fetch('http://<domain>/hs/serverless/fetch-quote')) durch eine Domain zu ersetzen, die mit Ihrem HubSpot-Account verknüpft ist.

<!--
    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>

• Speichern Sie die Datei und führen Sie sie dann hs upload aus, um sie in HubSpot hochzuladen. Folgen Sie den Anweisungen des Terminals, um die lokale Quelle und den Zielpfad auszuwählen. In diesem Tutorial können Sie einfach für jede Eingabeaufforderung die Eingabetaste drücken, um die Standardpfade zu verwenden.

• Gehen Sie zum Dashboard für Website-Seiten in Ihrem HubSpot-Account, indem Sie den Befehl hs open website-pages ausführen.

hs open website-pages

• Klicken Sie in Ihrem Browser oben rechts auf Erstellen, um eine neue Seite zu erstellen.
• Wählen Sie im Dialogfeld eine Domain aus, die Sie verwenden möchten, und weisen Sie ihr dann einen Seitennamen zu. Die Domain der Seite muss mit der Domain übereinstimmen, die Sie zum Aufrufen der serverlosen Funktion verwenden, um CORS-Fehler (Cross-Origin Resource Sharing) zu vermeiden. Sie können entweder diese Domain aus dem Dropdown-Menü auswählen oder die Endpunkt-URL im Code der Seitenvorlage (fetch('http://<domain>/hs/serverless/fetch-quote')) aktualisieren, um die Domain zu verwenden, die Sie in diesem Schritt auswählen.
• Klicken Sie auf Seite erstellen.
• Suchen Sie auf dem Vorlagenauswahlbildschirm nach Ihrer neuen Vorlage. Sie können die Bezeichnung oder den Dateinamen verwenden, um nach der Vorlage zu suchen (z. B. „Beispielseite für serverlose Funktion“). Die Vorlage wird unter Andere Vorlagen angezeigt, da sie nicht Teil eines Designs ist.

• Klicken Sie auf Vorlage auswählen.
• Klicken Sie im Seiten-Editor oben rechts auf Vorschau.

• Klicken Sie auf In neuem Tab öffnen.

​

Nächste Schritte

• Einbindung der Authentifizierung in eine Anfrage, um Aufrufe an HubSpot-APIs oder andere authentifizierte APIs von Drittanbietern zu tätigen.
• Implementieren Sie die Schaltfläche und den JavaScript-Code in ein Modul, anstatt sie als Hardcode in die Seitenvorlage einzubinden. Dies bietet Ihnen eine Option, die es Ihnen ermöglicht, die Funktion von jeder Seite aus aufzurufen, der das Modul hinzugefügt wird. Dazu würden Sie ein Modul erstellen und dann den HTML-Code in die module.html-Datei des Moduls und das JavaScript in die module.js-Datei einfügen.

<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);
    });
});