OptiSync ermöglicht es Ihnen, dynamische digitale Menüs durch API-Integration zu erstellen. Ihre POS-Systeme können direkt mit OptiSigns kommunizieren, um automatisch Preise zu aktualisieren, Bestände zu verfolgen und mehr.
-
So integrieren Sie POS-Systeme über API-Anfragen
-
So erstellen Sie digitale Menütafeln im Designer mit OptiSync
- Übertragung einer digitalen Menütafel auf einen Bildschirm
In diesem Artikel werden wir eine echte digitale Menütafel (DMB) erstellen, die mit einem Clover POS-System integriert ist. Die DMB ruft Produktinformationen von Clover ab und zeigt sie auf dem Bildschirm an. Wenn ein Artikel nicht verfügbar ist, wird er als "AUSVERKAUFT" angezeigt.
| HINWEIS |
API-Integration ist nur mit einem Pro Plus-Plan oder höher verfügbar. |
So integrieren Sie POS-Systeme über API-Anfragen
Die meisten POS-Systeme verfügen über eine API-Bibliothek, die OptiSigns verwenden kann, um die relevanten Daten programmgesteuert aus dem System abzurufen. Diese API kann Menüelemente, Artikelpreise, Verfügbarkeit und mehr zurückgeben.
Mit OptiSync können wir APIs mit dem OptiSigns-Portal verknüpfen und die Daten als digitale Menütafel (DMB) oder jeden anderen gewünschten Bildschirmtyp auf Bildschirme übertragen, ohne dass menschliche Eingriffe erforderlich sind.
Dieser Artikel konzentriert sich auf diese POS-spezifischen Besonderheiten und den Prozess der Zuordnung von POS-Daten zu Assets und deren Übertragung auf Bildschirme.
| WICHTIG |
| Um ein POS-System zu integrieren, müssen Sie zunächst eine API-Gateway-Anfrage einrichten. Eine vollständige Anleitung dazu finden Sie hier. |
API-Endpunkt-URL abrufen und API-Request-DataSource einrichten
Wir haben eine umfassende Anleitung zur Einrichtung Ihrer API-Gateway-Anfrage. Wir empfehlen, dieser Anleitung zu folgen, bis Ihre erste Anfrage eingerichtet ist.
Als absolutes Minimum benötigen Sie eine API-Endpunkt-URL und einen API-Authentifizierungstoken.
Zusätzliche Informationen zur API-Authentifizierung
Für die meisten tokenbasierten Authentifizierungen ist normalerweise nur die Einrichtung des Authentifizierungstokens mit dem Key Store für eine API-Anfrage erforderlich. Bestimmte APIs (wie Toast) erfordern jedoch zusätzliche Aufrufe, um den Authentifizierungstoken für jede Anfrage zu erhalten. Dies kann über die Pre-Request-Verarbeitung gehandhabt werden. Um zu sehen, wie dies gehandhabt wird, lesen Sie unseren Artikel über Toast APIs.
Verwaltung mehrerer Geschäfte oder POS-Standorte
Sobald Sie Ihre grundlegende API-Gateway-Anfrage eingerichtet haben, gibt es einige zusätzliche Schritte, die Sie ausführen sollten, wenn Sie mehrere Standorte für Ihre Bildschirme haben. Diese verschiedenen Standorte können unterschiedliche Menüs, unterschiedliche Tagesangebote oder sogar unterschiedliche Preise haben, abhängig von verschiedenen Faktoren.
POS-Systeme erfordern normalerweise separate Lizenzen für jeden Standort. Ihre POS-System-API kann unterschiedliche Store-IDs im API-Endpunkt bereitstellen oder unterschiedliche Authentifizierungstokens verwenden. Für größere Implementierungen mit mehreren Geschäften können Sie mit OptiSigns Substitutionsparameter verwenden, um dies zu handhaben.
Es gibt zwei Möglichkeiten, mehrere POS-Standorte zu verwalten:
- Richten Sie einzelne API-Anfragen für jeden Ihrer POS-Standorte ein, ändern Sie jedes Mal den Wert im URL-Endpunkt und ordnen Sie sie jedem Ihrer Bildschirme einzeln zu. Wenn Sie nur wenige Standorte haben, an denen Ihr POS-System verwendet wird, funktioniert dies gut.
- (Empfohlen) Konfigurieren Sie jeden Bildschirm so, dass er seine storeID an den API-Aufruf sendet, wodurch eine einzelne API-Anfrage Daten an mehrere Bildschirme liefern kann. Für mehr als zwei oder drei Bildschirme empfehlen wir diese Methode.
So handhaben Sie Option 2:
Um zu beginnen, suchen 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. Dieser ersetzt einen Teil Ihrer API-URL-Endpunkt.
- Wert - Stellt den eindeutigen Code dar, der mit dem Geschäft oder Standort verbunden ist, den Sie an Ihre API übergeben möchten.
In diesem Beispiel nehmen wir an, dass der zu ändernde Parameter "merchantID" heißt. Der eingegebene Wert muss von Ihnen ermittelt werden, da er eindeutig sein wird.
Gehen Sie nun zurück zur API-Request-Konfigurationsseite. Ersetzen Sie die merchantID im API-Endpunkt durch den zuvor definierten Schlüsselnamen.
Wenn die API-Anfrage 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 dieselben Schritte ausführen, wobei Sie den Schlüsselnamen gleich lassen und den Wert ändern. Dies ermöglicht es Ihnen, verschiedene Daten über eine einzige API-Anfrage an verschiedene Bildschirme zu senden.
So verwenden Sie Post-Request-Verarbeitung zur Konvertierung von API-Daten
Beim Abrufen von Daten aus Ihrem POS-System werden diese möglicherweise nicht sofort genau so angezeigt, wie Sie es möchten, oder Sie möchten möglicherweise einige Funktionen hinzufügen, wie z.B. die Möglichkeit, AUSVERKAUFT für nicht vorrätige Artikel anzuzeigen.
Beispielsweise können Preise als ganze Zahlen angezeigt werden (z.B. 1299 statt 12,99 €). Hier kommt die Registerkarte "Post-request" ins Spiel - diese ermöglicht Änderungen an den Daten, nachdem sie eingegangen sind. Dies erfordert einige grundlegende Programmierkenntnisse.
Nehmen wir das Beispiel der Preisanzeige von vorhin. Wie würden wir eine Zahl wie 1299 in 12,99 € umwandeln und diesen Code auf ähnliche Anzeigefehler (z.B. 1899 statt 18,99 €) erweiterbar machen?
Für dieses häufige Beispiel sollte dieser JavaScript-Code Ihr Problem lösen.
let {data, headers, status} = os.context.get("response");
temp_data = data.elements
for (let object of temp_data) {
object.price = '$' + (object.price*.01);
if (object.available == true)
{object.soldout=0;}
else {object.soldout=1;}
}
return temp_data
Dies korrigiert die zurückgegebenen Daten, sodass sie ordnungsgemäß angezeigt werden. Es ermöglicht auch die Erstellung von AUSVERKAUFT und Durchstreichungen, wenn Artikel nicht vorrätig sind.
| HINWEIS: Die Aktivierung und Konfiguration eines WebHooks ermöglicht die nahezu Echtzeitaktualisierung der von Ihrer API abgerufenen Daten. Wenn Sie planen, den Lagerbestand mit Ihren digitalen Schildern zu verfolgen, empfehlen wir, einen einzurichten. Sie müssen den bereitgestellten WebHook-Schlüssel in Ihre API eingeben, um dies einzurichten. |
So erstellen Sie digitale Menütafeln im Designer mit OptiSync
Um eine DMB mit Daten aus Ihrem POS-System zu erstellen, muss die API-Anfrage als DataSource registriert werden. Dies ermöglicht das Hinzufügen von Datenelementen zur OptiSigns Designer-App, wo sie formatiert und in jedes visuelle Design integriert werden können, das Sie anzeigen möchten.
Die Designer-App und Vorlagen können verwendet werden, um die Formatierung vorzunehmen und das Element den Daten aus der API-Datenquelle zuzuordnen. Jedes Textfeld oder Bildelement kann im Designer zugeordnet werden. Wenn Sie ein Bildelement zuordnen, wird die URL des Bildes zur Laufzeit ersetzt.
Verwendung von DataSources und Repeatern
Um zu beginnen, finden Sie Ihr Design oder erstellen Sie ein neues im Tab Dateien/Assets.
Bei geöffnetem Design klicken Sie auf "DataSource" in der linken Spalte. Klicken Sie dann auf "DataSource hinzufügen", um eine API-Datenquelle zum Design hinzuzufügen.
Scrollen Sie nach unten zu "API Gateway Collection" und klicken Sie darauf.
Sie können auch ein einmaliges Gateway mit dem Befehl API Gateway einrichten, wenn Sie ein einmaliges Design ohne Vor- oder Nachbearbeitung benötigen. In unserem Beispiel tun wir dies jedoch, daher verwenden wir Gateway Collection.
Sie sollten diesen Bildschirm sehen:
- Name - Der Name der DataSource. Dies ist intern und wird nicht auf Ihren Bildschirmen angezeigt.
- APIs auswählen - Hier wählen Sie aus den API-Gateways aus, die Sie bereits in früheren Schritten eingerichtet haben. Sie können nur eines oder mehrere auswählen. Wenn mehrere ausgewählt sind, wird die API-DataSource diese automatisch aggregieren.
- Aktualisierungsintervall - Wie oft Anfragen zur Aktualisierung an die API zurückgesendet werden sollen. Wählen Sie zwischen Keine (die API nie erneut aufrufen), 30 Minuten, 60 Minuten oder alle 6 Stunden. Wenn Sie WebHook für Ihre API-Anfrage aktivieren und die bereitgestellte URL in Ihre API eingeben, ändert sich dieses Aktualisierungsintervall auf nahezu Echtzeit.
Klicken Sie auf Speichern, und die DataSource wird erstellt.
Sie sollte in der linken Spalte unter "In diesem Design verwendet" erscheinen. Sie wird definitiv im Abschnitt "Andere DataSources" erscheinen. Möglicherweise müssen Sie die Seite aktualisieren, damit sie angezeigt wird.
Element-Mapping
Nachdem Ihre API-DataSource erstellt wurde, sind wir bereit, die Daten zuzuordnen. In diesem Beispiel zeigen wir Ihnen, wie Sie eine DMB mit der Fähigkeit erstellen, Produktnamen durchzustreichen und den Ausdruck "AUSVERKAUFT" anzuzeigen, wenn der Artikel nicht vorrätig ist.
Hinzufügen von Textelementen zu einer digitalen Menütafel
Erstellen Sie zunächst Ihr Design. Sie können Ihr Menü in unserer Designer-App erstellen.
Der einfachste Weg, eine DMB einzurichten, ist mit einem Data Repeater. Für eine vollständige Aufschlüsselung der Fähigkeiten eines Repeaters lesen Sie diesen Artikel. Hier werden wir uns darauf beschränken, zu zeigen, wie man Informationen aus Ihrem POS-System hinzufügt.
Um einen Repeater einzurichten, klicken Sie auf "Repeater" → Leeren Repeater hinzufügen.
Bei ausgewähltem Repeater klicken Sie auf Einstellungen. Wählen Sie dann Mit DataSource verbinden im Seitenmenü.
Wählen Sie die DataSource aus, die Sie im letzten Satz unter "Andere DataSources" eingerichtet haben.
Sie werden zum letzten Bereich mit Ihrer jetzt ausgewählten DataSource zurückgeführt. Klicken Sie nun auf Bearbeiten oder doppelklicken Sie auf den ausgewählten Repeater, um zum Repeater-Editor zu gelangen. Dies ist wie ein Design-im-Design, speziell für Ihre Repeater-(Menü-)Elemente. Bei ausgewähltem Text klicken Sie auf den Pfeil links.
Das öffnet die DataSource-Registerkarte. Klicken Sie auf die in diesem Design verwendete DataSource und Sie sehen etwas wie dies:
In diesem Beispiel möchten wir den Namen und den Preis anzeigen, mit der Möglichkeit, "AUSVERKAUFT" anzuzeigen.
Durch das Erstellen von Text und das Ziehen von Datenpunkten darauf können wir einen Menüpunkt wie diesen erstellen:
Dies wurde erstellt, indem Datenpunkte aus der API gefunden und in die gewünschten Textfelder gezogen wurden. In diesem Fall möchten wir nur den "Namen" und den "Preis" anzeigen, daher waren dies die Werte, die wir in ein leeres oder vorhandenes Textfeld gezogen haben.
Wenn Ihre Zahlen zusätzliche Formatierung benötigen, klicken Sie auf die Zahl und dann auf Einstellungen.
Klicken Sie auf Erweiterte Optionen → "Anzeigeformat" und wählen Sie "Nummer", dann klicken Sie auf "Zahlenformat" und wählen Sie die gewünschte Formatierung. Dies ermöglicht es Ihnen, Dollarzeichen zu Ihren Preisen hinzuzufügen, mit anderen Optionen.
Stellen Sie sicher, dass Sie auf Aktualisieren klicken, um Ihr neues Zahlenformat anzuzeigen.
Der Wert eines Repeaters besteht darin, dass er das Format dieser einen Zelle kopiert und dann die Datenpunkte durch andere aus Ihrer API ersetzt. Richtig gemacht, sollte Ihr Menü etwa so aussehen:
Der Repeater wird so viele Datenpunkte abrufen, wie Sie in Ihrer API eingerichtet haben. In diesem Beispiel haben wir ein Menü mit 9 Artikeln erstellt, aber mit dem richtigen Design können Sie so viele Artikel wie Sie möchten mit dynamischen Beschreibungen einfügen. Wenn Sie mehr Artikel haben als das, was Sie zu einem bestimmten Zeitpunkt auf Ihrem Bildschirm anzeigen möchten, werden die Artikel im Menü durchrotiert, bis alle angezeigt wurden.
Erstellen von Durchstreichungen und Ausverkauft-Warnungen
Im obigen Beispiel zeigen wir eine Ausverkauft-Warnung. Wir möchten diese jedoch nicht ständig anzeigen - nur wenn der Artikel nicht verfügbar ist. Mit OptiSync kann dies dank der Post-Request-Verarbeitung, die wir zuvor durchgeführt haben, erreicht werden. Unser Code hat diese "soldout: 0"-Daten erstellt. Diese sind mit unseren "available"-Daten verknüpft:
Wenn die "available"-Daten "true" anzeigen, zeigen die "soldout"-Daten 0 an. Wenn Ihr POS-System erkennt, dass Artikel nicht verfügbar sind, zeigen die "available"-Daten "false" an. Dies führt dazu, dass die "soldout"-Daten 1 anzeigen.
Wir können dieses Wissen nutzen, um unsere Ausverkauft-Warnungen und Durchstreichungen so einzurichten, dass sie nur angezeigt werden, wenn Artikel nicht verfügbar sind.
Zurück in unserem Repeater-Editor können wir auf einen Text klicken, den wir durchstreichen möchten, und auf Einstellungen klicken:
In der Registerkarte Einstellungen klicken Sie auf Erweiterte Optionen.
Unter Erweiterte Optionen klicken Sie auf Eigenschaftszuordnung.
Zwei Werte werden angezeigt: Eigenschaft und Wert.
Unter Eigenschaft wählen Sie Durchstreichen.
Unter Wert wählen Sie .soldout. Vor dem "." steht der Name Ihrer API-Anfrage.
Dies stellt den Text so ein, dass er durchgestrichen wird, wenn die "soldout"-Daten 1 anzeigen.
Wir können dies mit der Ausverkauft-Anzeige wiederholen, außer dass wir statt Durchstreichen Sichtbar wählen.
Dadurch wird der Ausverkauft-Text nur angezeigt, wenn die "visible"-Daten 1 anzeigen - mit anderen Worten, wenn Ihr Produkt ausverkauft ist.
Ihr endgültiges Menü sollte etwa so aussehen:
Schließlich sind Sie bereit, Ihr Design zu benennen und zu Speichern.
Übertragung digitaler Menütafeln auf Bildschirme
Ihre neue DMB auf einen Bildschirm zu bringen, ist relativ einfach. Gehen Sie zurück zu den Bildschirmen, die Sie zuvor mit Substitutionsparametern eingerichtet haben. Klicken Sie dann auf Bildschirm bearbeiten.
Wählen Sie unter Typ Asset aus und wählen Sie dann Ihr DMB-Asset zur Wiedergabe aus.
Das ist alles!
Sie sollten in der Lage sein, eine digitale Menütafel mit dynamischen Datenfunktionen zu erstellen.
Wenn Sie zusätzliche Fragen, Bedenken oder Feedback zu OptiSigns haben, wenden Sie sich bitte an unser Support-Team unter support@optisigns.com.