OptiSync låter dig skapa dynamiska digitala menyer genom API-integration. Dina kassasystem kan kommunicera direkt med OptiSigns för att automatiskt uppdatera priser, spåra lager med mera.
-
Hur man integrerar kassasystem genom API-förfrågningar
-
Hur man skapar digitala menyskyltar i Designer med OptiSync
- Publicera en digital menyskylt på en skärm
I den här artikeln kommer vi att skapa en verklig digital menyskylt (DMB) integrerad med ett Clover kassasystem. DMB:n hämtar produktinformation från Clover och visar den på skärmen. När en vara inte är tillgänglig kommer den att visas som "SLUTSÅLT".
| OBS |
API-integration är endast tillgänglig med ett Pro Plus-abonnemang eller högre. |
Hur man integrerar kassasystem genom API-förfrågningar
De flesta kassasystem har ett API-bibliotek som OptiSigns kan använda för att hämta relevant data från systemet programmatiskt. Detta API kan returnera menyartiklar, artikelpris, tillgänglighet med mera.
Med OptiSync kan vi koppla API:er till OptiSigns-portalen och skicka data till skärmar som en digital menyskylt (DMB) eller vilken annan typ av skärm du vill utan mänskligt ingripande.
Den här artikeln kommer att fokusera på dessa kassasystemspecifika utmaningar och processen att mappa kassadata till resurser och publicera dem på skärmar.
| VIKTIGT |
| För att integrera ett kassasystem måste du först konfigurera en API Gateway-förfrågan. En komplett guide för hur man gör det finns här. |
Hämta API-slutpunkt URL och konfigurera API-förfrågans DataSource
Vi har en omfattande guide om hur du konfigurerar din API gateway-förfrågan. Vi rekommenderar att du följer denna guide tills din första förfrågan är konfigurerad.
Som ett minimum behöver du en API-slutpunkt URL och en API-autentiseringstoken.
Ytterligare information om API-autentisering
För de flesta tokenbaserade autentiseringar är det normalt allt som krävs för en API-förfrågan att konfigurera autentiseringstoken med nyckellagret. Men vissa API:er (som Toast) kräver ytterligare anrop för att hämta autentiseringstoken för varje förfrågan, detta kan hanteras genom förbehandling. För att se hur man hanterar det, se vår artikel om Toast API:er.
Hantera flera butiker eller kassaplatser
När du har konfigurerat din grundläggande API Gateway-förfrågan finns det några ytterligare steg du vill utföra om du har flera platser för dina skärmar. Dessa olika platser kan ha olika menyer eller olika specialerbjudanden för dagen, eller till och med olika prissättning beroende på olika faktorer.
Kassasystem kräver normalt separata licenser för varje plats. Ditt kassasystems API kan tillhandahålla olika butiks-ID i API-slutpunkten eller använda olika autentiseringstoken. För större implementeringar med flera butiker kan du använda substitutionsparametrar för att hantera det med OptiSigns.
Det finns två sätt att hantera flera kassaplatser:
- Konfigurera individuella API-förfrågningar för var och en av dina kassaplatser, ändra värdet i URL-slutpunkten varje gång och mappa dem till var och en av dina skärmar individuellt. Om du bara har några få platser där ditt kassasystem används fungerar detta utmärkt.
- (Rekommenderas) Konfigurera varje skärm att skicka sitt storeID till API-anropet, vilket gör att en enda API-förfrågan kan tillhandahålla data till flera skärmar. För något mer än två eller tre skärmar rekommenderar vi denna metod.
Så här hanterar du alternativ 2.
För att komma igång, hitta skärmen du vill redigera.
Klicka på Avancerat → Mer → Enhetens extra attribut.
Två fält visas, Nyckel och Värde.
- Nyckel - En parameter som kommer att användas under API-anropet för att ersätta din butiks värde. Detta kommer att ersätta en del av din API URL-slutpunkt.
- Värde - Representerar den unika koden som är associerad med butiken eller platsen du vill skicka till ditt API.
I detta exempel låtsas vi att parametern du ändrar kallas "merchantID". Det inmatade värdet måste erhållas från din sida eftersom det är unikt.
Gå nu tillbaka till API-förfrågans konfigurationssida. Ersätt merchantID i API-slutpunkten med det nyckelnamn du tidigare definierade.
När API-förfrågan utlöses på enheten kommer den att ta värdet från enheten och ersätta det vid körning. För varje skärm vill du utföra samma steg, behålla nyckelnamnet samma medan du ändrar värdet. Detta gör att du kan skicka olika data till olika skärmar från en enda API-förfrågan.
Hur man använder efterbehandling för att konvertera API-data
När du hämtar data från ditt kassasystem kanske det inte initialt visas exakt som du vill, eller så kanske du vill lägga till viss funktionalitet, som möjligheten att visa SLUTSÅLT för varor som är slut i lager.
Till exempel kan priser visas som hela tal (t.ex. 1299 istället för 12,99 kr). Det är här fliken "Efter-förfrågan" kommer in - detta tillåter ändringar att göras på datan efter att den kommer in. Detta kräver viss grundläggande kodning för att använda.
Ta exemplet med prisvisningen från tidigare. Hur skulle vi konvertera ett nummer som 1299 till att visas som 12,99 kr, och göra den kodbiten utbyggbar för liknande visningsfel (t.ex. 1899 istället för 18,99 kr)?
För detta vanliga exempel bör denna JavaScript-kod lösa ditt problem.
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
Detta kommer att fixa den returnerade datan så att den visas korrekt. Det kommer också att möjliggöra skapande av SLUTSÅLT och genomstrykning när varor är slut i lager.
| OBS: Aktivering och konfigurering av en WebHook möjliggör uppdatering i nära realtid av data som hämtas från ditt API. Om du planerar att hålla reda på butikslager med dina digitala skyltar rekommenderar vi att du konfigurerar en. Du måste mata in den tillhandahållna WebHook-nyckeln i ditt API för att konfigurera detta. |
Hur man skapar digitala menyskyltar i Designer med OptiSync
För att skapa en DMB med data från ditt kassasystem måste API-förfrågan registreras som en DataSource. Detta gör att dataelement kan läggas till i OptiSigns Designer-app, där den kan formateras och införlivas i vilken visuell design du vill visa.
Designer-appen och mallar kan användas för att göra formateringen och mappa elementet till data från API-datakällan. Vilken textbox eller bildelement som helst kan mappas i Designer. När du mappar ett bildelement kommer bildens URL att ersättas vid körning.
Använda DataSources och Repeaters
För att komma igång, hitta din design eller skapa en ny i fliken Filer/Resurser.
Med designen öppen, klicka på "DataSource" i den vänstra kolumnen. Klicka sedan på "Lägg till DataSource" för att lägga till en API-datakälla till designen.
Bläddra ner till där det står "API Gateway Collection" och klicka på den.
Du kan också konfigurera en engångs-Gateway med kommandot API Gateway om du behöver en engångsdesign utan för- eller efterbehandling. I vårt exempel gör vi dock det, så vi använder Gateway Collection.
Du bör se denna skärm:
- Namn - Namnet på DataSource. Detta är internt och kommer inte att visas på dina skärmar.
- Välj API:er - Här väljer du från de API Gateways du redan har konfigurerat i tidigare steg. Du kan välja bara en eller flera. Om flera väljs kommer API DataSource automatiskt att aggregera dem.
- Uppdateringsintervall - Hur ofta förfrågningar ska skickas tillbaka till API:et för uppdateringar. Välj från Ingen (ring aldrig tillbaka till API:et), 30 minuter, 60 minuter eller var 6:e timme. Om du aktiverar WebHook på din API-förfrågan och matar in den tillhandahållna URL:en i ditt API kommer detta uppdateringsintervall att ändras till nära realtid.
Klicka på Spara, och DataSource skapas.
Den ska visas i vänstra kolumnen under "Används i denna design". Den kommer definitivt att visas i avsnittet "Andra DataSources" . Du kan behöva uppdatera sidan för att den ska visas.
Elementmappning
Nu när din API DataSource har skapats är vi redo att mappa datan. I detta exempel visar vi dig hur du skapar en DMB med möjlighet att stryka genom produktnamn och visa frasen "SLUTSÅLT" när varan är slut i lager.
Lägga till textelement till en digital menyskylt
Skapa först din design. Du kan skapa din meny i vår Designer-app.
Det enklaste sättet att konfigurera en DMB är med en Data Repeater. För en fullständig genomgång av en Repeaters funktioner, se denna artikel. Här kommer vi att hålla oss till att lära hur man lägger till information från ditt kassasystem.
För att konfigurera en Repeater, klicka på "Repeaters" → Lägg till tom Repeater.
Med Repeatern vald, klicka på Inställningar. Välj sedan Anslut till DataSource i sidomenyn.
Välj DataSource som du konfigurerade i förra steget under "Andra DataSources".
Du kommer att tas tillbaka till den senaste rutan med din DataSource nu vald. Klicka nu på Redigera eller dubbelklicka på den valda Repeatern för att gå till Repeater-redigeraren. Detta är som en design-i-designen, specifikt för dina Repeater-(meny)artiklar. Med text vald, klicka på pilen till vänster.
Det tar upp DataSource-fliken. Klicka på DataSource som används i denna design och du kommer att se något liknande detta:
I detta exempel vill vi visa namnet och priset, med möjlighet att säga "SLUTSÅLT"
Genom att skapa text och dra datapunkter till den kan vi skapa en menyartikel som denna:
Detta skapades genom att hitta datapunkter från API:et och dra dem till önskade textrutor. I detta fall vill vi bara visa "namn" och "pris", så dessa värden var vad vi drog in i en tom eller befintlig textruta.
Om dina nummer behöver extra formatering, klicka på numret och tryck sedan på Inställningar.
Klicka på Avancerade alternativ → "Visningsformat" och välj "Nummer," klicka sedan på "Nummerformat" och välj den formatering du vill ha. Detta gör att du kan lägga till kronor till dina priser, med andra alternativ.
Se till att klicka på Uppdatera för att ditt nya nummerformat ska visas.
Värdet av en repeater är att den kopierar formatet för denna cell och sedan ersätter datapunkterna med andra från ditt API. Korrekt gjort bör din meny se ut något så här:
Repeatern kommer att hämta så många datapunkter som du har konfigurerat på ditt API. I detta exempel har vi skapat en meny med 9 artiklar, men med rätt design kan du lägga in så många artiklar som du vill, med dynamiska beskrivningar också. Om du har fler artiklar än vad du har ställt in att visa på din skärm vid ett givet tillfälle kommer artiklarna på menyn att rotera genom dem tills alla har visats.
Skapa genomstrykningar och slutsålt-varningar
I exemplet ovan visar vi en Slutsålt-varning. Vi vill dock inte visa den hela tiden - bara när varan inte är tillgänglig. Med OptiSync kan detta uppnås tack vare efterbehandlingen vi gjorde tidigare. Vår kod skapade denna "soldout: 0"-data. Detta är kopplat till vår "available"-data:
När "available"-datan visar "true" visar "soldout"-datan 0. När ditt kassasystem upptäcker att varor inte är tillgängliga kommer "available"-datan att visa "false". Detta gör att "soldout"-datan visar 1.
Vi kan använda denna kunskap för att konfigurera våra Slutsålt-varningar och genomstrykningar att bara visas när varor inte är tillgängliga.
Genom att gå tillbaka till vår Repeater-redigerare kan vi klicka på en text vi vill stryka genom och trycka på Inställningar:
I fliken Inställningar, tryck på Avancerade alternativ.
Under Avancerade alternativ, tryck på Egenskapsmappning.
Två värden visas: Egenskap och Värde.
Under Egenskap, välj Genomstrykning.
Under Värde, välj .soldout. Före "." kommer namnet på din API-förfrågan att vara.
Detta ställer in texten att strykas över när "soldout"-datan visar 1.
Vi kan upprepa detta med Slutsålt-texten, men istället för Genomstrykning, välj Synlig.
Detta gör att Slutsålt-texten bara visas när "visible"-datan visar 1 - med andra ord när din produkt är slutsåld.
Din slutgiltiga meny bör se ut något så här:
Slutligen är du redo att namnge och Spara din Design.
Publicera digitala menyskyltar på skärmar
Att få din nya DMB på en skärm är relativt enkelt. Gå tillbaka till skärmarna du konfigurerade med substitutionsparametrar tidigare. Tryck sedan på Redigera skärm.
Under Typ, välj resurs och välj sedan din DMB-resurs att spela upp.
Det är allt!
Du bör kunna skapa en digital menyskylt med dynamiska datafunktioner.
Om du har ytterligare frågor, funderingar eller feedback om OptiSigns, kontakta gärna vårt supportteam på support@optisigns.com.