Die Integration Ihrer API mit OptiSigns hat viele Anwendungsmöglichkeiten und ermöglicht die einfache Anzeige von automatisch aktualisierten Daten auf Ihren Bildschirmen. In dieser Anleitung zeigen wir Ihnen, wie Sie Ihre API verbinden - ohne Softwareentwicklungs-Hintergrund.
- Was API-Integration leisten kann
- Was Sie für den Einstieg benötigen
-
So richten Sie eine API-Anfrage ein
- So mappen Sie API-Daten im Designer
- Mehr über OptiSync-Anwendungsfälle
|
HINWEIS: Die API-Integration ist nur mit einem Pro Plus-Plan oder höher verfügbar. |
Was API-Integration leisten kann
OptiSigns ermöglicht die einfache Integration mit Benutzer-APIs. Dies erlaubt es, Daten aus der API eines Benutzers auf jedem Ihrer digitalen Schilder anzuzeigen. Dies ermöglicht dynamische Updates für:
- Digitale Menütafeln - Integrieren Sie sich mit Ihren POS-Systemen und lassen Sie die DMB automatisch aktualisieren, und bearbeiten Sie das Format Ihrer DMB über die Designer-App, wann immer nötig.
- Automatisierte HR-Updates - Verwenden Sie die API aus Ihren HR-Systemen, um Geburtstage oder Arbeitsjubiläen automatisch auf den Bildschirmen anzuzeigen.
- Lagerbestandsverfolgung - Verwenden Sie die API Ihres Lagers, um Bestandsebenen mit automatischen Updates in Ihrer gesamten Organisation anzuzeigen
- Alle anderen Anwendungsfälle zur Informationsanzeige, bei denen Sie API-Daten verarbeiten und die Daten auf den Bildschirmen anzeigen müssen.
Diese API-Integration kann in OptiSigns mit wenig bis gar keinem Code erreicht werden, was sie auch für Personen ohne Softwareentwicklungs-Hintergrund zugänglich macht. In dieser Anleitung zeigen wir Ihnen anhand des folgenden Beispiels mit einer API aus dem Clover POS-System, wie Sie die Einrichtung durchführen.
Was Sie für den Einstieg benötigen
Sie benötigen Ihre:
- API-Endpunkt-URL
- API-Autorisierungstoken
Diese sind erforderlich, damit OptiSigns eine Verbindung mit Ihrer gewünschten API herstellen kann. Stellen Sie sicher, dass Sie sie griffbereit haben, bevor Sie versuchen, Ihre API-Anfrage im OptiSigns Web Portal einzurichten. Sie sollten diese von einem IT-Experten in Ihrer Organisation oder über Ihren POS-System-Administrator erhalten können.
So richten Sie eine API-Anfrage ein
Das API-Gateway ist ein leistungsfähiges Tool, das es Benutzern ermöglicht, APIs zentral zu verwalten sowie APIs zu konfigurieren und zu testen.
Nachdem Sie nun alles haben, was Sie benötigen, lassen Sie uns mit der Einrichtung einer API-Anfrage beginnen. Mit einer API-Anfrage können Sie:
- Den OptiSigns API-Keystore verwenden, um API-Schlüssel von anderen Systemen sicher zu speichern und zu verwenden.
- API-Endpunkte testen, mit der Möglichkeit, Header und Parameter zu modifizieren.
- Substitutionsparameter und Vorverarbeitungs- und Nachverarbeitungsregeln verwenden, um komplexe Integrationen zu handhaben. Vorverarbeitungsregeln können Ihnen bei API-Integrationssituationen helfen, die einen zusätzlichen Aufruf erfordern, um ein Authentifizierungstoken zu erhalten, bevor der API-Aufruf erfolgt. Die Nachverarbeitung ermöglicht es Ihnen, die zurückgegebenen Daten zu verarbeiten und sie für Ihre Verwendung besser anzupassen.
Um zu beginnen, öffnen Sie Ihr OptiSigns Web Portal.
Navigieren Sie dort zur oberen rechten Ecke des Bildschirms und fahren Sie mit der Maus über Ihren Kontonamen.
Fahren Sie mit der Maus über Mehr → Datenquellen
Sie sehen den folgenden Bildschirm.
Jetzt sind Sie bereit, loszulegen.
Schritt 1: Speichern Sie Ihr API-Autorisierungstoken im OptiSigns API-Keystore
Der erste Schritt besteht darin, Ihr API-Autorisierungstoken zu nehmen und es im OptiSigns API-Keystore zu speichern.
Dieser Schritt ist technisch gesehen optional: Sie können Ihr API-Autorisierungstoken in eine einzelne API-Anfrage eingeben. Der Keystore hat jedoch einige wichtige Vorteile:
- Ermöglicht das Senden Ihres API-Autorisierungstokens an mehrere API-Anfragen, ohne dass es jedes Mal manuell eingegeben werden muss
- Bietet überlegene Sicherheit für Ihr API-Autorisierungstoken und macht es für externe Akteure viel schwieriger, es zu entdecken
Daher empfehlen wir diesen Schritt dringend.
Um den Keystore zu öffnen, finden Sie das Schloss-Symbol und klicken Sie darauf.
Dies öffnet den API-Keystore.
Klicken Sie auf Schlüssel hinzufügen.
Hier gibt es zwei Felder.
- Erstes Feld - Geben Sie hier den Namen des Schlüssels ein. Wir empfehlen etwas, das Ihnen hilft, sich daran zu erinnern. Sie werden dies verwenden, um eine API-Anfrage einzurichten.
- Zweites Feld - Der tatsächliche eindeutige Passcode für Ihre API-Kommunikation.
Nachdem Sie Ihr API-Autorisierungstoken eingegeben haben, klicken Sie auf Speichern. Wenn Sie eine Anfrage mit diesem API-Schlüssel ausführen möchten, verwenden Sie den Begriff: {{apiKeystore.<<key>>}}, wobei "<<key>>" durch den zuvor eingegebenen Namen ersetzt wird. In diesem Beispiel nennen wir unsere Anfrage "clover".
Jetzt sind wir bereit, Ihre API-Anfrage einzurichten.
Schritt 2: API-Anfrage einrichten und testen
Bevor Sie in OptiSigns fortfahren, empfehlen wir, Ihre API-Verbindung mit einem kostenlosen Tool wie Postman zu testen. Dies bietet mehrere Vorteile, darunter:
- Überprüfung Ihrer Datenformatierung
- Sicherstellen, dass die richtigen Daten bereitgestellt werden
- Verifizierung Ihrer Authentifizierung
- Identifizierung von Integrationsproblemen oder Verbindungsfehlern
Die Testparameter, Endpunkte und Authentifikatoren können dann in OptiSigns verwendet werden, um Ihre API-Anfrage einzurichten. So geht's.
Klicken Sie auf die Schaltfläche Anfrage hinzufügen, um das Fenster zur Konfiguration und zum Testen der API-Anfrage zu öffnen.
- Anzeigename - Dies wird unter der API-Gateway-Liste angezeigt, hauptsächlich um Benutzern bei der Identifizierung der API-Anfrage zu helfen.
- Name - Dies wird als Referenz auf die API-Anfrage verwendet, es ist ein technischer Name, der später im Pfad verwendet wird, um auf die API-Anfragedaten zu verweisen.
- URL - Dies ist der API-Endpunkt, Sie können die GET- oder POST-Methode verwenden, abhängig von der API-Anfrage. Wenn Sie beispielsweise GraphQL verwenden, werden alle Anfragen POST verwenden.
- Parameter - Ermöglicht es Ihnen, die Parameter in Ihrer API-Anfrage zu definieren. Sie können Parameter in Ihrer API-Endpunkt-URL sehen, diese werden einem "?" vorangestellt. Diese können in Pre- und Post-Processing-Anfragecode verwendet werden, um Ihre API-Anfrage weiter zu automatisieren.
- Header - Der/die Header der API-Anfrage. Sie sollten hier Ihr API-Authentifizierungstoken eingeben.
- Voranfrage - Ein optionales Code-Snippet, das den Kontext vor der API-Anfrage vorbereitet. Beispielsweise müssen Sie möglicherweise eine andere API aufrufen, um ein kurzlebiges Authentifizierungstoken zu erhalten, bevor Sie die API aufrufen, oder Sie müssen einige Variablen berechnen, die in der API-Anfrage verwendet werden sollen.
- Nachanfrage - Ein optionales Code-Snippet, das die von der Anfrage empfangenen Daten modifiziert. Wenn die empfangenen Daten beispielsweise nicht genau so sind, wie Sie sie anzeigen möchten, können Sie ein wenig Code schreiben, um sie entsprechend Ihren digitalen Display-Anforderungen zu modifizieren.
- Webhook aktivieren - Generiert einen Webhook-Link und ein zugehöriges Token. Dieser Webhook kann verwendet werden, um uns über eine Änderung in den Daten zu benachrichtigen, wodurch die API-Anfrage aktualisiert und Ihre Bildschirme automatisch aktualisiert werden.
- Diese Anfrage aktivieren - Legt den Status der API-Anfrage fest.
Um die Anfrage zu testen, müssen wir den Header konfigurieren. Hier kommt der Keystore ins Spiel. Geben Sie im zweiten Feld Bearer {{apiKeystore.<<key>>}} ein, wobei Bearer der Token-Typ ist und {{apiKeystore.<<key>>}} das im Keystore gespeicherte Token abruft. In diesem Beispiel verwenden wir den Namen "clover" wie oben erwähnt.
Sobald das erledigt ist, klicken Sie auf "Test ausführen". Wenn der Antwortcode 200 ist, hat die API erfolgreich Daten zurückgegeben. Bei jedem anderen Code liegt ein Problem in der API-Anfrage vor.
So verwenden Sie Parameter
Parameter sind in URLs aller Arten vorhanden. Es gibt zwei Elemente eines Parameters:
- Sie müssen einem '?' in der URL folgen;
- Sie haben einen zugehörigen Wert
Der Tab Parameter ermöglicht es Ihnen, die Parameter anzugeben, deren Wert Sie ändern möchten.
Normalerweise wird der Tab Parameter in Verbindung mit den Tabs Voranfrage und Nachanfrage verwendet, um automatisch aktualisierende Werte zu erstellen.
So verwenden Sie Pre- und Post-Request-Verarbeitung
Um die Pre- und Post-Request-Verarbeitung zu verwenden, sind einige Javascript-Kenntnisse erforderlich.
| Was ist der Unterschied zwischen den beiden? |
| Voranfrage: Dies ist ein Code-Snippet, das normalerweise den Kontext vor der API-Anfrage festlegt. Dies kann das Abrufen eines Authentifizierungstokens von einer anderen API sein oder das Ändern von Parametern, um mehr Automatisierung zu ermöglichen. |
| Nachanfrage: Ein Code-Snippet, das auf die von der API-Anfrage empfangenen Daten angewendet wird. Dieser Code kann verwendet werden, um die empfangenen Daten zu modifizieren und die Anzeige auf Ihren Bildschirmen zu ändern. |
Der Tab Voranfrage ist der Ort, an dem Sie Code für die Voranfrage-Verarbeitung eingeben.
Beispiel: Für Systeme, die ein dynamisch generiertes Authentifizierungstoken wie Toast benötigen, kann dies verwendet werden, um eine andere API aufzurufen, um das Authentifizierungstoken abzurufen und es auf den Kontext der API zu setzen.
Weitere Informationen zu diesem Beispiel finden Sie in diesem Artikel über die Verbindung Ihrer Toast-API.
Der Tab Nachanfrage ist der Ort, an dem Sie Code für die Nachanfrage-Verarbeitung eingeben.
Beispiel: Sie erhalten Daten von Ihrer Point-of-Sale (POS)-Software-API, aber bestimmte Daten werden nicht so angezeigt, wie Sie es möchten.
Preise können als ganze Zahlen (z.B. 1299) anstelle als richtige Preise (z.B. 12,99 €) angezeigt werden. Dafür bräuchten wir ein Code-Snippet, um die ganze Zahl in einen Preis umzuwandeln, und dieser Code sollte auf ähnliche Anzeigefehler erweiterbar sein (z.B. 1899 statt 18,99 €).
Für dieses häufige Beispiel sollte dieses JavaScript-Code-Snippet Ihr Problem lösen. Wir können auch die Möglichkeit einrichten, die Produktverfügbarkeit gleichzeitig zu mappen.
Dies wird die zurückgegebenen Daten korrigieren, damit sie richtig angezeigt werden:
Dies kann auch verwendet werden, um Daten als "AUSVERKAUFT" erscheinen zu lassen, ein Element durchzustreichen, wenn es nicht verfügbar ist, oder Warnungen in einem Bestandsverwaltungssystem anzuzeigen. Weitere Informationen zu diesem Beispiel finden Sie in unserem Artikel über Digitale Menütafeln.
Schritt 3 (Optional): Substitutionsparameter aus Geräteattributen verwenden.
Viele Point-of-Sale (POS)-Systeme sind nach Geschäft/Standort lizenziert. Es ist möglich, eine einzelne API-Anfrage mit OptiSync zu konfigurieren und sie mit verschiedenen Standorten unter Verwendung von Substitutionsparametern arbeiten zu lassen. Die Eingabe dieser ermöglicht es Ihrem Bildschirm, seine Geschäfts- oder Standortidentifikationsinformationen zu kommunizieren. Dies bedeutet, dass eine einzige API-Anfrage unterschiedliche Daten an verschiedene Geschäfte oder Standorte kommunizieren kann, anstatt einzelne API-Anfragen pro Bildschirm erstellen zu müssen.
Um zu beginnen, finden Sie den Bildschirm, den Sie bearbeiten möchten.
Klicken Sie auf Erweitert → Mehr → Zusätzliche Geräteattribute.
Zwei Felder werden angezeigt, Schlüssel und Wert.
- Schlüssel - Ein Parameter, der während des API-Aufrufs verwendet wird, um den Wert Ihres Geschäfts zu ersetzen. Dies wird einen Teil Ihrer API-URL-Endpunkt ersetzen.
- Wert - Repräsentiert den eindeutigen Code, der mit dem Geschäft oder Standort verknüpft ist, den Sie an Ihre API weitergeben möchten.
In diesem Beispiel pflegen wir hier die Clover merchantID. Der eingegebene Wert muss von Ihrer Seite bezogen werden, da er eindeutig ist.
Gehen Sie nun zurück zur API-Anfrage-Konfigurationsseite. Ersetzen Sie die merchantID im API-Endpunkt mit dem zuvor definierten Schlüsselnamen.
Wenn der API-Aufruf auf dem Gerät ausgelöst wird, nimmt es den Wert vom Gerät und ersetzt ihn zur Laufzeit. Für jeden Bildschirm sollten Sie diese gleichen Schritte durchführen, wobei Sie den Schlüsselnamen gleich lassen und den Wert ändern. Dies ermöglicht es Ihnen, unterschiedliche Daten an verschiedene Bildschirme zu senden.
So mappen Sie API-Daten im Designer
Um Daten von Ihrer API an einen Bildschirm zu senden, muss sie als Datenquelle registriert werden. Dies ermöglicht es, Datenelemente zur Designer-App von OptiSigns hinzuzufügen, wo sie formatiert und in jedes visuelle Design integriert werden können, das Sie anzeigen möchten.
Die Designer-App und Vorlagen können für die Formatierung verwendet werden, und die API-Datenquelle übernimmt das Daten-Mapping. Jedes Textfeld oder Bildelement kann im Designer gemappt werden. Wenn Sie ein Bildelement mappen, wird die URL des Bildes zur Laufzeit ersetzt.
Schritt 1: Eine API-Datenquelle erstellen
Um zu beginnen, finden Sie Ihr Design oder erstellen Sie ein neues im Tab Dateien/Assets.
Klicken Sie bei geöffnetem Design auf "Datenquelle" in der linken Spalte. Klicken Sie dann auf "Datenquelle hinzufügen", um eine API-Datenquelle zum Design hinzuzufügen.
Scrollen Sie nach unten zu "API Gateway" und klicken Sie darauf.
Sie sollten diesen Bildschirm sehen:
Wählen Sie die oben erstellte API-Anfrage aus. Sie sehen einen Bildschirm wie den unten:
Hier können Sie auswählen, welche Daten Sie speziell zum Design hinzufügen möchten. Wenn Sie alle Optionen möchten, klicken Sie auf "Weiter". Dieser Bildschirm wird angezeigt.
Datenquellenname ist, wie diese Datenquelle im Designer angezeigt wird. Benennen Sie sie, wie es Ihnen hilft, sie zu identifizieren.
Synchronisation ermöglicht es Ihnen zu wählen, wie oft Sie sich mit Ihrer API synchronisieren möchten. Nur einmal importieren ist sinnvoll für einmalige Aktionen und dergleichen. Wenn dies für ein längerfristiges Asset ist, wählen Sie Periodischer direkter Zugriff oder Periodische Hintergrundsynchronisation, je nachdem, ob Sie die Daten von einem bestimmten Gerät verwenden müssen, um den Kontext festzulegen.
Klicken Sie auf Fertig, und die Datenquelle ist erstellt.
Sie sollte in der linken Spalte unter "In diesem Design verwendet" erscheinen. Sie wird definitiv im Abschnitt "Andere Datenquellen" erscheinen. Sie müssen möglicherweise die Seite aktualisieren, damit sie angezeigt wird.
Jetzt gehen wir zu Schritt 2.
Schritt 2: Das Element-Mapping pflegen
Sobald die API-Datenquelle erstellt wurde, sind Sie bereit, die Daten zu mappen.
Öffnen Sie im Designer Ihre Datenquelle.
Klicken Sie darauf und ein Bildschirm ähnlich diesem wird erscheinen:
Wenn Sie eines davon öffnen, werden die von Ihrer API abgerufenen Daten angezeigt:
Indem Sie auf ein beliebiges Datenelement klicken und es auf den Bildschirm ziehen, werden die Daten angezeigt. Sie haben die Option, die Daten als Repeater oder eigenständig zu verwenden.
In diesem Fall möchten wir sie eigenständig verwenden. Für Menüs macht ein Repeater am meisten Sinn.
Um die Datenbindung zu überprüfen, können Sie auf jedes gemappte Element klicken und dann auf Einstellungen klicken. Sie sehen dort den Asset-Elementnamen.
Wir haben den Artikelnamen und den Preis aus der API dem Design zugeordnet. Wenn es auf dem Bildschirm veröffentlicht wird, wird der Wert automatisch durch den Wert aus der API ersetzt. Wenn im Clover POS-System Änderungen vorgenommen werden, wird die Änderung automatisch auf dem Bildschirm widergespiegelt.
Wiederholen Sie diesen Schritt für alle Elemente, die Sie der API-Datenquelle zuordnen möchten, und speichern Sie das Design. Ihr Design ist einsatzbereit.
Mehr OptiSync-Anwendungsfälle
Wenn Sie weitere Details zu API-Integrations-Anwendungsfällen wünschen, haben wir mehrere zusätzliche Artikel. Bitte sehen Sie:
- Point-of-Sale-Systeme zum Erstellen digitaler Menütafeln
- Veranstaltungspläne anzeigen
- Integration von Toast API-Systemen
- Benutzerdefinierte RSS-Feeds
- Dynamisches Daten-Mapping
Das ist alles!
So integrieren Sie API-Daten und veröffentlichen sie auf Ihrem Bildschirm. Am wichtigsten, ohne Programmierung!
Wenn Sie weitere Fragen, Bedenken oder Feedback zu OptiSigns haben, wenden Sie sich bitte an unser Support-Team unter support@optisigns.com