Serverlose Funktion von HubSpot: Erste Schritte

Last updated:
APPLICABLE PRODUCTS
  • CMS Hub
    • Enterprise

Mit serverlosen Funktionen können Sie serverseitigen Code schreiben, der über APIs mit HubSpot und Drittanbieterdiensten interagiert.  APIs, für die eine Authentifizierung erforderlich ist, können aus Sicherheitsgründen nicht für das Front-End einer Website genutzt werden – Ihre Anmeldedaten wären zugänglich und die Website damit Angriffen ausgesetzt.

 Serverlose Funktionen können eine Mittlerfunktion zwischen Ihren Front-End- und Back-End-Diensten übernehmen, die eine Authentifizierung erfordern. Mit serverlosen Funktionen müssen Entwickler keine neuen Server aufsetzen und verwalten. Der Aufwand ist viel geringer und serverlose Funktionen lassen sich einfach anpassen und skalieren, wenn ein Unternehmen wächst. In diesem Artikel erhalten Sie einen Überblick darüber, was serverlose Funktionen von HubSpot sind und wie sie funktionieren. Wir empfehlen, ihn vor der Durchführung dieses Tutorials zu lesen.

Dieses Tutorial führt Sie durch die Erstellung Ihrer ersten serverlosen Funktion.

Sie erstellen einen Ordner für serverlose Funktionen, richten Ihren Konfigurationsordner ein, erstellen eine Funktion und erhalten eine Antwort von ihr.

Was Sie tun sollten, bevor Sie dieses Tutorial machen:

1. Einen Projektordner erstellen

Öffnen Sie Ihre hubspot.config.yml-Datei und stellen Sie sicher, dass Ihr defaultPortal entweder auf Ihren CMS-Entwickler-Sandbox-Account oder auf einen Account bei CMS Hub Enterprise festgelegt ist.

Danach müssen Sie auf Ihrem Computer in dem Ordner, der Ihre hubspot.config.yml-Datei enthält, einen serverless-tutorial-Ordner erstellen. Dieser Ordner enthält alle unsere Dateien, sowohl die Funktionen selbst als auch eine Vorlage, die die Funktion verwendet. 

Führen Sie in Ihrem Terminal den watch-Befehl aus:

hs watch serverless-tutorial serverless-tutorial

Dies bewirkt, dass alle Änderungen an diesem Ordner zu Uploads an den Design-Manager führen. Da der Ordner derzeit keinen Inhalt hat, zeigt dieser Befehl einfach an, dass Watcher bereit ist und überwacht.

2. Einen functions-Ordner erstellen

Erstellen Sie im serverless-tutorial-Ordner einen my-first-function.functions-Ordner.
Dies ähnelt Ordnern für benutzerdefinierte Module, die in .module enden. .functions dient zur Kommunikation, dass der Ordner serverlose Funktionen enthält. Die in diesem Ordner gespeicherten Dateien sind nicht öffentlich zugänglich.

Da dieser Ordner derzeit leer ist, erstellt der von Ihnen ausgeführtewatch-Befehl noch nicht diesen Ordner im Design-Manager.

3. Eine Konfigurationsdatei erstellen

Erstellen Sie eine neue Datei in Ihrem my-first-function.functions-Ordner und benennen Sie sie serverless.json. serverless.json ist eine erforderliche Datei innerhalb eines .functions-Ordners. Sie dient als Konfigurationsdatei für serverlose Funktionen. Definieren der Laufzeitumgebung, der Version der serverlosen Funktionen und der verfügbaren Endpunkte. Eine Übersicht über alles, was in dieser Datei definiert wird, finden Sie in unserer Referenz für serverlose Funktionen.

Wenn Sie die Datei leer erstellt und gespeichert haben, erhalten Sie eine Fehlermeldung in Ihrem Terminal, dass Sie keine leere serverless.json-Datei hochladen können. Sie können diese ignorieren, da Sie diesen Code noch hinzufügen und dann speichern – dies löst dann einen neuen Upload aus, der erfolgreich ist.

Fügen Sie den folgenden Code in Ihre serverless.json ein:

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

Speichern Sie die Datei.

Lassen Sie diese Datei in Ihrem Code-Editor geöffnet, wir kommen darauf noch zurück.

Da watch ausgeführt wird, sehen Sie nun, wenn Sie Ihren Design-Manager aktualisieren, Ihre serverless-tutorial- und my-first-function.functions-Ordner sowie Ihre neue serverless.json-Datei. 

4. Eine Funktionsdatei erstellen

Erstellen Sie eine neue Datei in Ihrem my-first-function.functions-Ordner und benennen Sie sie gratulation.js.

Dies ist die eigentliche Funktionsdatei, die Datei, die eine Aufgabe ausführt und ausführt.

Fügen Sie den folgenden Code ein:

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

Diese serverlose Funktion gibt bei Ausführung Folgendes zurück: die Zeichenfolge "Glückwunsch! Sie haben gerade eine serverlose Funktion bereitgestellt." und den Status-Code 200, der auf Erfolg hinweist.

In einem realen Szenario ist es wahrscheinlich, dass Sie APIs verwenden oder einige Berechnungen durchführen, die Sie nicht öffentlich sein sollen. Sie würden das Ergebnis dieser Berechnungen oder einen einfachen Statuscode basierend auf dem Erfolg Ihrer API-Transaktionen zurückgeben.

Sie sind noch nicht fertig, es gibt noch keine Möglichkeit, diese Funktion auszuführen.

5. Ihre Funktion in Ihrer serverless.json registrieren

Öffnen Sie Ihre serverless.json-Datei erneut. Suchen Sie in Ihrer Datei nach Ihrem "endpoints"-Objekt.

Aktualisieren Sie das Objekt wie folgt:

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

Das Endpunkt-Objekt enthält ein "congratulation"-Objekt. "congratulation" ist der Endpunkt, den Sie erstellen. Der Name des Endpunkts definiert den Pfad, mit dem Sie Ihre serverlose Funktion aufrufen.

Serverlose Funktionen werden über einen Pfad in der Domain Ihres HubSpot CMS-Accounts bereitgestellt.

Diese Funktionen können unter folgender Adresse aufgerufen werden: 

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

Im Falle dieses von Ihnen erstellten "congratulation"-Endpunkts ist dies 

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

Aus diesem Grund ist es in der Regel ratsam, Ihrem Endpunkt einen ähnlich Namen wie den Ihrer Funktionsdatei zu geben, und beide sollten basierend auf den Informationen, anhand deren sie wirken, benannt werden, nicht basierend auf der Aktion, die anhand dieser Informationen durchgeführt wird. Sie sollten die HTTP-Methode oder die HTTP-Methoden verwenden, um den Typ der Aktion mitzuteilen, die Sie anhand dieser Informationen durchführen. Der "method"-Parameter definiert die von Ihrer Funktion unterstützte HTTP-Methode. Dies kann eine einzelne Zeichenfolge oder ein Array von Zeichenfolgen sein, die die Methoden bezeichnen, die die Funktion unterstützt.

6. Ihre Funktion testen

Der einfachste Weg, eine GET-Anfrage an Ihre serverlose Funktion zu testen, ist, direkt im Browser zur URL Ihres Endpunkts zu gehen.
https://your-domain.com/_hcms/api/congratulation

Ersetzen Sie ihre-domain.com durch die Domain Ihrer HubSpot-Website.

Sie sollten "Glückwunsch! Sie haben gerade eine serverlose Funktion bereitgestellt" sehen.

Sehr gut. Sie haben es geschafft.

Wenn Sie diese Antwort nicht erhalten, gehen Sie noch einmal von oben in diesem Tutorial sorgfältig die einzelnen Schritte durch und überprüfen Sie den Code. Wahrscheinlich wurden die Anweisungen in Schritt 4 oder 5 nicht korrekt befolgt.

Für kompliziertere Anfragen ist es hilfreich, ein Tool wiePostman zu verwenden. Postman erleichtert das Testen und Debuggen von APIs. Eine praktische Funktion für Front-End-Entwickler ist dessen Code-Generierung, die einen Startpunkt für Ihren JavaScript-Aufruf Ihrer Funktion generieren kann.

7. Eine einfach Vorlage erstellen, die Ihre Funktion aufruft

Gehen Sie über ein neues Terminalfenster mithilfe von cd in Ihren serverless-tutorial-Ordner.

Führen Sie den folgenden Befehl in Ihrem Terminal aus:

hs create template "test-function"

Dadurch wird eine test-function.html-Datei erstellt. Öffnen Sie diese Datei in Ihrem Code-Editor.

Fügen Sie über dem </head>-Tag <script></script> hinzu.

Kopieren Sie das folgende JavaScript:

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

Serverlose Funktionen von HubSpot unterstützen nur den Content-Typ application/json. Wenn Sie es auslassen, wird ein Fehler vom Typ „Nicht unterstützter Medientyp“ angezeigt.

Fügen Sie innerhalb des script-Tags, das Sie zuvor erstellt haben, Ihren kopierten JavaScript-Code ein.

Ändern Sie www.example.com in die Domain Ihres Accounts.

Speichern Sie die Datei.

8. Eine Seite mithilfe der test-function.html-Vorlage erstellen

Im Design-Manager finden Sie Ihre test-function.html-Datei (Sie müssen möglicherweise aktualisieren).

Klicken Sie mit der rechten Maustaste auf die Datei und wählen Sie „Seite erstellen“ aus.

Nennen Sie Ihre Seite „Testfunktion“. Seite erstellen

Klicken Sie auf „Vorschau“. Die Vorschau wird in einem neuem Fenster angezeigt. 

Überprüfen Sie die Seite, indem Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite klicken und „Untersuchen“ auswählen.

Wenn Sie alles richtig gemacht haben, sollten Sie in Ihrer Konsole die Glückwunschnachricht sehen.

Herzlichen Glückwunsch, Sie haben Ihre serverlose Funktion von einer CMS Hub-Seite aus aufgerufen. 

Bei diesem Tutorial rufen Sie die serverlose Funktion auf der Vorlagenebene auf. Serverlose Funktionen können jedoch überall aufgerufen werden, wo Sie JavaScript auf Ihrer von CMS gehosteten Website hinzufügen können. Der häufigste Ort, an dem Sie dies tun können, ist in Ihren benutzerdefinierten Modulen.

Debuggen Ihrer serverlosen Funktion

In dieser Phase sollte Ihre serverlose Funktion einwandfrei funktionieren. Je komplizierter Ihre Funktion wird, desto schwieriger ist es, Fehler zu beheben. So wie die Konsole in Ihrem Browser beim Debuggen von JavaScript auf Ihrem Frontend hilft, können Sie ähnliche Protokolle für Ihre serverlosen Funktionen mit hs logs erhalten. Weitere Informationen zu diesem Befehl finden Sie in der Referenz für lokale Entwicklung.

hs logs <endpoint-name> --follow

Was haben Sie getan?

Sie haben einen Ordner für serverlose Funktionen mit einer serverless.json-Konfigurationsdatei und einer Funktionsdatei mit dem Namen congratulation.js erstellt. Sie haben „GET“ verwendet, um einen Glückwunschtext von der serverlosen Funktion abzurufen. Sie haben JavaScript verwendet, um Ihre serverlose Funktion von einer Seite im CMS Hub aus aufzurufen.

Sie können jetzt nachvollziehen, wie die Konfigurationsdatei, die Funktionsdatei und der .functions-Ordner zusammenhängen. Das CLI verfügt über einen praktischen Befehl, den Sie verwenden können, um Ihre Funktionen beim nächsten Mal schneller zu erstellen.

hs create function <function name>

Diese Funktion erstellt einen .functions-Ordner eine serverless.json-Datei und eine Funktionsdatei mit den von Ihnen angegebenen Namen.

Die nächsten Schritte?

War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.