Nehmen wir an, dass ein Eiscreme-Unternehmen ein Selbstbedienungsterminal neben einem Eisstand verwendet, um Kunden und Kundinnen nach ihrem Lieblingsgeschmack zu fragen. Außerdem kann an einer Verlosung teilgenommen werden, um Preise zu gewinnen. Natürlich möchte das Unternehmen in diesem Fall alle Daten so schnell wie möglich in HubSpot haben, um mit dem Kunden oder der Kundin in Kontakt zu treten und ihnen einen Newsletter sowie weitere Informationen zu senden. Das Beispiel in diesem Artikel zeigt, wie du einen JSON-String erstellst und ihn an eine API in der realen Welt sendest.
Die Nutzung der HubSpot API ist nicht allzu kompliziert und basiert auf typischen REST-Webdiensten. Der Endpunkt, den wir verwenden, lautet ‘https://api.hubapi.com/crm/v3/objects/contacts‘.
Da wir einen Kontakt in HubSpot erstellen möchten, müssen wir einen JSON-String im Body des HTTP-Aufrufs übermitteln. Hier ist ein sehr einfaches Beispiel dafür, wie der JSON-String aussehen muss, damit ihn der HubSpot-Server versteht. Wir liefern den Namen, die E-Mail-Adresse und ein benutzerdefiniertes HubSpot-Feld namens ‘favorite_ice_cream‘, das den Geschmack enthält, den der Kunde bzw. die Kundin im Formular ausgewählt hat.
Für die Authentifizierung musst du einen API-Token übermitteln. Um einen Token zu erhalten, gehst du zum Einstellungsbereich deines HubSpot-Kontos und erstellst eine private App. Den Token speicherst du für die spätere Verwendung, wenn Peakboard den Aufruf initiiert.
Du möchtest dem Benutzer die Möglichkeit geben, seinen Geschmack aus einer Dropdown-Liste auszuwählen. Um die Dropdown-Liste mit den entsprechenden Werten zu füllen, erstellst du eine Variablenliste mit allen möglichen Geschmacksrichtungen. Es ist eine einfache Liste mit nur einer Spalte.
Der Bildschirm ist einfach gestaltet. Wir wählen ein ansprechendes Hintergrundbild aus, fügen den Text hinzu und platzieren die interaktiven Elemente auf dem Bildschirm. Um die Dropdown-Liste mit Werten zu füllen, verbinden wir sie mit der Variablenliste. Außerdem geben wir allen drei Eingabesteuerelementen einen geeigneten Namen, damit wir auf sie aus unserem Code heraus zugreifen können.
Melde dich jetzt zu unserem Newsletter an!
Werfen wir einen Blick auf den Code hinter der Schaltfläche ‚Submit‘. Folgendes passiert:
Wenn dies nicht nur ein Beispiel wäre, würdest du die Rückgabemeldung auf Fehler überprüfen. Um es einfach zu halten, schreibst du die Antwort stattdessen einfach in das Protokoll.
Überprüfen wir den log. Wir können das dynamisch erstellte JSON sehen. Außerdem sehen wir die Antwort vom HubSpot API-Server.
Michelle ist leidenschaftlich darum bemüht, die Welt der Innovationen zu erkunden und andere daran teilhaben zu lassen. Als Technikenthusiastin bei Peakboard taucht sie kontinuierlich in die neuesten Trends und Entwicklungen ein, um stets auf dem neuesten Stand zu sein.
