Met OptiSync kunt u dynamische digitale menu's maken via API-integratie. Uw POS-systemen kunnen rechtstreeks communiceren met OptiSigns om automatisch prijzen bij te werken, voorraad bij te houden en meer.
-
Hoe POS-systemen te integreren via API-verzoeken
-
Hoe digitale menuborden te bouwen in Designer met OptiSync
- Een digitaal menubord naar een scherm pushen
In dit artikel maken we een echt Digitaal Menubord (DMB) geïntegreerd met een Clover POS-systeem. Het DMB haalt productinformatie op uit Clover en toont deze op het scherm. Wanneer een artikel niet beschikbaar is, wordt het weergegeven als "UITVERKOCHT."
| OPMERKING |
API-integratie is alleen beschikbaar met een Pro Plus abonnement of hoger. |
Hoe POS-systemen te integreren via API-verzoeken
De meeste POS-systemen hebben een API-bibliotheek die OptiSigns kan gebruiken om de relevante gegevens programmatisch uit het systeem te halen. Deze API kan menu-items, artikelprijzen, beschikbaarheid en meer retourneren.
Met OptiSync kunnen we API's koppelen aan het OptiSigns-portaal en de gegevens naar schermen pushen als een Digitaal Menubord (DMB) of elk ander type scherm dat u wilt, zonder menselijke tussenkomst.
Dit artikel richt zich op deze POS-specifieke aspecten en het proces van het koppelen van POS-gegevens aan assets en het pushen ervan naar schermen.
| BELANGRIJK |
| Om een POS-systeem te integreren, moet u eerst een API Gateway-verzoek instellen. Een complete handleiding hiervoor vindt u hier. |
API-eindpunt URL verkrijgen en API-verzoek DataSource instellen
We hebben een uitgebreide handleiding over hoe u uw API gateway-verzoek instelt. We raden aan deze handleiding te volgen totdat uw initiële verzoek is ingesteld.
Minimaal heeft u een API-eindpunt URL en een API-authenticatietoken nodig.
Aanvullende informatie over API-authenticatie
Voor de meeste token-gebaseerde authenticatie is het instellen van het authenticatietoken met de sleutelopslag normaal gesproken alles wat vereist is voor een API-verzoek. Maar bepaalde API's (zoals Toast) vereisen extra aanroepen om het authenticatietoken voor elk verzoek te verkrijgen, dit kan worden afgehandeld via pre-request verwerking. Om te zien hoe dit te behandelen, zie ons artikel over Toast API's.
Meerdere winkels of POS-locaties beheren
Zodra u uw basis API Gateway-verzoek heeft ingesteld, zijn er enkele aanvullende stappen die u wilt uitvoeren als u meerdere locaties voor uw schermen heeft. Deze verschillende locaties kunnen verschillende menu's hebben, of verschillende speciale aanbiedingen voor die dag, of zelfs verschillende prijzen afhankelijk van verschillende factoren.
POS-systemen vereisen normaal gesproken aparte licenties voor elke locatie. Uw POS-systeem API kan verschillende winkel-ID's in het API-eindpunt verstrekken of verschillende authenticatietokens gebruiken. Voor grotere implementaties met meerdere winkels kunt u substitutieparameters gebruiken om dit met OptiSigns af te handelen.
Er zijn twee manieren om meerdere POS-locaties te beheren:
- Stel individuele API-verzoeken in voor elk van uw POS-locaties, waarbij u elke keer de waarde in het URL-eindpunt wijzigt en ze individueel aan elk van uw schermen koppelt. Als u slechts enkele locaties heeft waar uw POS-systeem wordt gebruikt, werkt dit prima.
- (Aanbevolen) Elk scherm configureren om zijn winkel-ID naar de API-aanroep te sturen, waardoor één API-verzoek gegevens aan meerdere schermen kan leveren. Voor meer dan twee of drie schermen raden we deze methode aan.
Hier leest u hoe u optie 2 aanpakt.
Om te beginnen, zoekt u het scherm dat u wilt bewerken.
Klik op Geavanceerd → Meer → Extra apparaatkenmerken.
Twee velden verschijnen, Sleutel en Waarde.
- Sleutel - Een parameter die tijdens de API-aanroep wordt gebruikt om te vervangen voor de waarde van uw winkel. Dit vervangt een deel van uw API URL-eindpunt.
- Waarde - Vertegenwoordigt de unieke code die is gekoppeld aan de winkel of locatie die u aan uw API wilt doorgeven.
In dit voorbeeld doen we alsof de parameter die u wijzigt "merchantID" heet. De ingevoerde waarde moet aan uw kant worden verkregen omdat deze uniek is.
Ga nu terug naar de API-verzoek configuratiepagina. Vervang de merchantID in het API-eindpunt door de sleutelnaam die u eerder heeft gedefinieerd.
Wanneer het API-verzoek op het apparaat wordt geactiveerd, neemt het de waarde van het apparaat en vervangt deze tijdens runtime. Voor elk scherm wilt u dezelfde stappen uitvoeren, waarbij u de sleutelnaam hetzelfde houdt terwijl u de waarde wijzigt. Dit stelt u in staat om verschillende gegevens naar verschillende schermen te pushen met één API-verzoek.
Hoe post-request verwerking te gebruiken om API-data te converteren
Bij het ophalen van gegevens uit uw POS-systeem, worden deze mogelijk niet direct op de gewenste manier weergegeven, of u wilt misschien wat functionaliteit toevoegen, zoals de mogelijkheid om UITVERKOCHT weer te geven voor artikelen die niet op voorraad zijn.
Prijzen kunnen bijvoorbeeld als hele getallen worden weergegeven (bijv. 1299 in plaats van €12,99). Dat is waar het tabblad "Post-request" om de hoek komt kijken - dit maakt het mogelijk om wijzigingen aan te brengen in de gegevens nadat ze binnenkomen. Dit vereist enige basiskennis van coderen.
Neem het voorbeeld van de prijsweergave van eerder. Hoe zouden we een getal als 1299 converteren om weer te geven als €12,99, en dat stuk code uitbreidbaar maken voor vergelijkbare weergavefouten (bijv. 1899 in plaats van €18,99)?
Voor dit veelvoorkomende voorbeeld zou dit stuk JavaScript-code uw probleem moeten oplossen.
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
Dit corrigeert de geretourneerde gegevens, waardoor ze correct worden weergegeven. Het maakt ook het aanmaken van UITVERKOCHT en doorhalingen mogelijk wanneer artikelen niet op voorraad zijn.
| OPMERKING: Het inschakelen en configureren van een WebHook maakt bijna real-time bijwerking mogelijk van de gegevens die uit uw API worden gehaald. Als u van plan bent om winkelvoorraad bij te houden met uw digitale schermen, raden we aan er een in te stellen. U moet de verstrekte WebHook-sleutel in uw API invoeren om dit in te stellen. |
Hoe digitale menuborden te bouwen in Designer met OptiSync
Om een DMB te maken met gegevens uit uw POS-systeem, moet het API-verzoek worden geregistreerd als een DataSource. Dit maakt het mogelijk om data-elementen toe te voegen aan de OptiSigns Designer-app, waar het kan worden opgemaakt en opgenomen in elk visueel ontwerp dat u wilt weergeven.
De Designer-app en sjablonen kunnen worden gebruikt om de opmaak te doen en het element te koppelen aan de gegevens uit de API-gegevensbron. Elk tekstvak of afbeeldingselement kan worden gekoppeld in Designer. Wanneer u een afbeeldingselement koppelt, wordt de URL van de afbeelding tijdens runtime vervangen.
DataSources en Repeaters gebruiken
Om te beginnen, zoekt u uw ontwerp of maakt u een nieuwe in het tabblad Bestanden/Assets.
Met het ontwerp open, klikt u op "DataSource" in de linkerkolom. Klik vervolgens op "DataSource toevoegen" om een API-gegevensbron aan het ontwerp toe te voegen.
Scroll naar beneden naar waar staat "API Gateway Collection" en klik erop.
U kunt ook een eenmalige Gateway instellen met het API Gateway commando als u een eenmalig ontwerp nodig heeft zonder pre- of post-request verwerking. In ons voorbeeld doen we dat echter wel, dus gebruiken we Gateway Collection.
U zou dit scherm moeten zien:
- Naam - De naam van de DataSource. Dit is intern gericht en wordt niet op uw schermen weergegeven.
- API's selecteren - Hier selecteert u uit de API Gateways die u al in eerdere stappen heeft ingesteld. U kunt er slechts één selecteren, of meerdere. Als er meerdere zijn geselecteerd, zal de API DataSource deze automatisch aggregeren.
- Update interval - Hoe vaak verzoeken terug naar de API moeten worden gestuurd voor updates. Selecteer uit Geen (bel de API nooit terug), 30 minuten, 60 minuten of elke 6 uur. Als u WebHook inschakelt op uw API-verzoek en de verstrekte URL in uw API invoert, verandert dit Update Interval in bijna real-time.
Klik op Opslaan, en de DataSource wordt aangemaakt.
Het zou in de linkerkolom moeten verschijnen onder "Gebruikt in dit ontwerp". Het verschijnt zeker in de sectie "Andere DataSources" . Mogelijk moet u de pagina vernieuwen om het te laten verschijnen.
Element mapping
Nu uw API DataSource is aangemaakt, zijn we klaar om de gegevens te koppelen. In dit voorbeeld laten we u zien hoe u een DMB maakt met de mogelijkheid om productnamen door te halen en de zin "UITVERKOCHT" weer te geven wanneer het artikel niet op voorraad is.
Tekstelementen toevoegen aan een digitaal menubord
Maak eerst uw ontwerp. U kunt uw menu maken binnen onze Designer-app.
De gemakkelijkste manier om een DMB in te stellen is met een Data Repeater. Voor een volledige uitleg van de mogelijkheden van een Repeater, zie dit artikel. Hier beperken we ons tot het leren hoe informatie uit uw POS-systeem toe te voegen.
Om een Repeater in te stellen, klikt u op "Repeaters" → Lege Repeater toevoegen.
Met de Repeater geselecteerd, klikt u op Instellingen. Selecteer vervolgens Verbinden met DataSource in het zijmenu.
Selecteer de DataSource die u in de laatste set heeft ingesteld onder "Andere DataSources".
U wordt teruggebracht naar het laatste venster met uw DataSource nu geselecteerd. Klik nu op Bewerken of dubbelklik op de geselecteerde Repeater om naar de Repeater Editor te gaan. Dit is als een ontwerp-binnen-een-ontwerp, specifiek voor uw Repeater (menu) items. Met tekst geselecteerd, klikt u op de pijl aan de linkerkant.
Dat brengt het DataSource-tabblad naar voren. Klik op de DataSource gebruikt in dit ontwerp en u ziet zoiets als dit:
In dit voorbeeld willen we de naam en de prijs weergeven, met de mogelijkheid om "UITVERKOCHT" te zeggen
Door tekst te maken en er gegevenspunten naartoe te slepen, kunnen we een menu-item als dit maken:
Dit werd gemaakt door gegevenspunten uit de API te vinden en ze naar de gewenste tekstvakken te slepen. In dit geval willen we alleen de "naam" en "prijs" weergeven, dus dat waren de waarden die we in een leeg of bestaand tekstvak sleepten.
Als uw nummers extra opmaak nodig hebben, klikt u op het nummer en vervolgens op Instellingen.
Klik op Geavanceerde opties → "Weergaveformaat" en kies "Nummer," klik vervolgens op "Nummerformaat" en selecteer de opmaak die u wilt. Dit stelt u in staat om eurotekens aan uw prijzen toe te voegen, met andere opties.
Zorg ervoor dat u op Bijwerken klikt om uw nieuwe nummerformaat weer te geven.
De waarde van een repeater is dat het het formaat van deze ene cel zal kopiëren en vervolgens de gegevenspunten vervangt door andere uit uw API. Correct uitgevoerd, zou uw menu er ongeveer zo uit moeten zien:
De Repeater haalt zoveel gegevenspunten op als u heeft ingesteld in uw API. In dit voorbeeld hebben we een menu gemaakt met 9 items, maar met het juiste ontwerp kunt u zoveel items plaatsen als u wilt, met ook dynamische beschrijvingen. Als u meer items heeft dan wat u heeft ingesteld om op uw scherm tegelijk weer te geven, zullen de items op het menu erdoorheen roteren totdat ze allemaal zijn weergegeven.
Doorhalingen en uitverkocht waarschuwingen maken
In het bovenstaande voorbeeld tonen we een Uitverkocht waarschuwing. We willen dit echter niet altijd weergeven - alleen wanneer het artikel niet beschikbaar is. Met OptiSync kan dit worden bereikt dankzij de Post-request verwerking die we eerder hebben uitgevoerd. Onze code creëerde deze "soldout: 0" gegevens. Dit is gekoppeld aan onze "available" gegevens:
Wanneer de "available" gegevens "true" lezen, lezen de "soldout" gegevens 0. Wanneer uw POS-systeem detecteert dat items niet beschikbaar zijn, zullen de "available" gegevens "false" lezen. Dit zorgt ervoor dat de "soldout" gegevens 1 lezen.
We kunnen deze kennis gebruiken om onze Uitverkocht waarschuwingen en doorhalingen zo in te stellen dat ze alleen verschijnen wanneer items niet beschikbaar zijn.
Terugkerend naar onze Repeater Editor, kunnen we op een stuk tekst klikken dat we willen doorhalen en op Instellingen klikken:
In het tabblad Instellingen klikt u op Geavanceerde opties.
Onder Geavanceerde opties klikt u op Eigenschap mapping.
Twee waarden verschijnen: Eigenschap en Waarde.
Onder Eigenschap kiest u Doorhaling.
Onder Waarde kiest u .soldout. Voor de "." staat de naam van uw API-verzoek.
Dit stelt de tekst in om doorgestreept te worden wanneer de "soldout" gegevens 1 lezen.
We kunnen dit herhalen met de Uitverkocht tekst, behalve in plaats van Doorhaling, kiest u Zichtbaar.
Dit zorgt ervoor dat de Uitverkocht tekst alleen verschijnt wanneer de "visible" gegevens 1 lezen - met andere woorden, wanneer uw product is uitverkocht.
Uw uiteindelijke menu zou er ongeveer zo uit moeten zien:
Tot slot bent u klaar om uw ontwerp een naam te geven en op te slaan.
Digitale menuborden naar schermen pushen
Het krijgen van uw nieuwe DMB op een scherm is relatief eenvoudig. Ga terug naar de schermen die u eerder met substitutieparameters heeft ingesteld. Klik vervolgens op Scherm bewerken.
Onder Type kiest u asset en selecteert u vervolgens uw DMB-asset om af te spelen.
Dat is alles!
U zou nu in staat moeten zijn om een digitaal menubord te maken met dynamische datafuncties.
Als u aanvullende vragen, zorgen of feedback over OptiSigns heeft, neem dan gerust contact op met ons supportteam via support@optisigns.com.