OptiSync consente di creare menu digitali dinamici tramite integrazione API. I vostri sistemi POS possono interfacciarsi direttamente con OptiSigns per aggiornare automaticamente i prezzi, tracciare l'inventario e molto altro.
-
Come Integrare i Sistemi POS Tramite Richieste API
-
Come Creare Menu Board Digitali in Designer con OptiSync
- Inviare un Menu Board Digitale a uno Schermo
In questo articolo, creeremo un vero Menu Board Digitale (DMB) integrato con un sistema POS Clover. Il DMB recupera le informazioni sui prodotti da Clover e le visualizza sullo schermo. Quando un articolo non è disponibile, verrà visualizzato come "ESAURITO".
| NOTA |
L'integrazione API è disponibile solo con un piano Pro Plus o superiore. |
Come Integrare i Sistemi POS Tramite Richieste API
La maggior parte dei sistemi POS dispone di una libreria API che OptiSigns può utilizzare per ottenere i dati rilevanti dal sistema in modo programmatico. Questa API può restituire voci di menu, prezzi degli articoli, disponibilità e altro ancora.
Con OptiSync, possiamo collegare le API al portale OptiSigns e inviare i dati agli schermi come Menu Board Digitale (DMB) o qualsiasi altro tipo di schermo desiderato senza necessità di intervento umano.
Questo articolo si concentrerà su queste particolarità specifiche del POS e sul processo di mappatura dei dati POS agli asset e invio agli schermi.
| IMPORTANTE |
| Per integrare un sistema POS, dovrete prima configurare una richiesta API Gateway. Una guida completa su come farlo si trova qui. |
Ottenere l'Endpoint URL API e Configurare la DataSource di Richiesta API
Abbiamo una guida completa su come configurare la vostra richiesta gateway API. Vi consigliamo di seguire questa guida fino a quando la vostra richiesta iniziale non sarà configurata.
Come minimo, avrete bisogno di un URL endpoint API e di un token di autenticazione API.
Informazioni Aggiuntive sull'Autenticazione API
Per la maggior parte delle autenticazioni basate su token, configurare il token di autenticazione con il key store è normalmente tutto ciò che serve per una richiesta API. Ma certe API (come Toast) richiederanno chiamate aggiuntive per ottenere il token di autenticazione per ogni richiesta, questo può essere gestito tramite l'elaborazione pre-richiesta. Per vedere come gestirlo, consultate il nostro articolo sulle API Toast.
Gestire Più Negozi o Sedi POS
Una volta configurata la richiesta base API Gateway, ci sono alcuni passaggi aggiuntivi che vorrete eseguire se avete più sedi per i vostri schermi. Queste diverse sedi potrebbero avere menu diversi, o offerte speciali diverse per quel giorno, o anche prezzi diversi a seconda di vari fattori.
I sistemi POS normalmente richiedono licenze separate per ogni sede. L'API del vostro sistema POS potrebbe fornire ID negozio diversi nell'endpoint API o utilizzare token di autenticazione diversi. Per distribuzioni più grandi con più negozi, potete utilizzare parametri di sostituzione per gestirli con OptiSigns.
Ci sono due modi per gestire più sedi POS:
- Configurare richieste API individuali per ciascuna delle vostre sedi POS, cambiando il valore nell'endpoint URL ogni volta e mappandole a ciascuno dei vostri schermi individualmente. Se avete solo poche sedi dove viene utilizzato il vostro sistema POS, questo funzionerà benissimo.
- (Consigliato) Configurare ogni schermo per inviare il proprio storeID alla chiamata API, permettendo a una singola richiesta API di fornire dati a più schermi. Per più di due o tre schermi, consigliamo questo metodo.
Ecco come gestire l'opzione 2.
Per iniziare, trovate lo schermo che desiderate modificare.
Cliccate Avanzate → Altro → Attributi Aggiuntivi Dispositivo.
Appariranno due campi, Chiave e Valore.
- Chiave - Un parametro che verrà utilizzato durante la chiamata API per sostituire il valore del vostro negozio. Questo sostituirà parte del vostro URL endpoint API.
- Valore - Rappresenta il codice univoco associato al negozio o alla sede che desiderate passare alla vostra API.
In questo esempio, fingeremo che il parametro che state modificando si chiami "merchantID". Il valore inserito dovrà essere ottenuto da parte vostra poiché sarà univoco.
Ora, tornate alla pagina di configurazione della richiesta API. Sostituite il merchantID nell'endpoint API con il nome della Chiave che avete definito in precedenza.
Quando la richiesta API viene attivata sul dispositivo, prenderà il valore dal dispositivo e lo sostituirà al runtime. Per ogni schermo, vorrete eseguire questi stessi passaggi, mantenendo lo stesso nome della Chiave mentre cambiate il Valore. Questo vi permetterà di inviare dati diversi a schermi diversi da una singola Richiesta API.
Come Utilizzare l'Elaborazione Post-Richiesta per Convertire i Dati API
Quando recuperate i dati dal vostro sistema POS, potrebbero non apparire inizialmente esattamente come desiderate, o potreste voler aggiungere alcune funzionalità, come la capacità di visualizzare ESAURITO per gli articoli non disponibili.
Ad esempio, i prezzi potrebbero essere visualizzati come numeri interi (es. 1299 invece di €12,99). È qui che entra in gioco la scheda "Post-richiesta" - questo permette di apportare modifiche ai dati dopo che arrivano. Questo richiederà alcune conoscenze di programmazione di base.
Prendiamo l'esempio della visualizzazione del prezzo di prima. Come convertire un numero come 1299 per visualizzarlo come €12,99, e rendere quel pezzo di codice estensibile a qualsiasi errore di visualizzazione simile (es. 1899 invece di €18,99)?
Per questo esempio comune, questo pezzo di codice JavaScript dovrebbe risolvere il vostro problema.
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
Questo correggerà i dati restituiti, permettendo loro di essere visualizzati correttamente. Permetterà anche la creazione di ESAURITO e testo barrato per quando gli articoli non sono disponibili.
| NOTA: L'abilitazione e la configurazione di un WebHook consente l'aggiornamento quasi in tempo reale dei dati recuperati dalla vostra API. Se pianificate di tenere traccia dell'inventario del negozio utilizzando i vostri schermi digitali, vi consigliamo di configurarne uno. Dovrete inserire la chiave WebHook fornita nella vostra API per configurarlo. |
Come Creare Menu Board Digitali in Designer con OptiSync
Per creare un DMB con dati dal vostro sistema POS, la Richiesta API dovrà essere registrata come DataSource. Questo permette di aggiungere elementi dati all'app Designer di OptiSigns, dove possono essere formattati e incorporati in qualsiasi design visivo che desiderate visualizzare.
L'app Designer e i template possono essere utilizzati per la formattazione e la mappatura dell'elemento ai dati dalla sorgente dati API. Qualsiasi casella di testo o elemento immagine può essere mappato in Designer. Quando mappate un elemento immagine, l'URL dell'immagine verrà sostituito al runtime.
Utilizzo di DataSource e Ripetitori
Per iniziare, trovate il vostro design o createne uno nuovo nella scheda File/Asset.
Con il design aperto, cliccate "DataSource" nella colonna di sinistra. Quindi, cliccate "Aggiungi DataSource" per aggiungere una sorgente dati API al design.
Scorrete verso il basso dove dice "Raccolta Gateway API" e cliccateci.
Potete anche configurare un Gateway una tantum con il comando API Gateway se avete bisogno di un design occasionale senza elaborazione pre- o post-richiesta. Nel nostro esempio, tuttavia, lo stiamo facendo, quindi useremo Raccolta Gateway.
Dovreste vedere questa schermata:
- Nome - Il nome della DataSource. Questo è rivolto internamente e non verrà mostrato sui vostri schermi.
- Seleziona API - Qui selezionerete dai Gateway API che avete già configurato nei passaggi precedenti. Potete selezionarne solo uno o più. Se ne vengono selezionati più, la DataSource API li aggregherà automaticamente.
- Intervallo di Aggiornamento - Con quale frequenza inviare richieste all'API per gli aggiornamenti. Selezionate tra Nessuno (non richiamare mai l'API), 30 minuti, 60 minuti o ogni 6 ore. Se abilitate il WebHook sulla vostra Richiesta API e inserite l'URL fornito nella vostra API, questo Intervallo di Aggiornamento cambierà in quasi tempo reale.
Premete Salva, e la DataSource è creata.
Dovrebbe apparire nella colonna di sinistra sotto "Utilizzato in questo design". Apparirà sicuramente nella sezione "Altre DataSource" . Potrebbe essere necessario aggiornare la pagina per farlo apparire.
Mappatura degli Elementi
Ora che la vostra DataSource API è stata creata, siamo pronti per mappare i dati. In questo esempio, vi mostreremo come creare un DMB con la capacità di barrare i nomi dei prodotti e visualizzare la frase "ESAURITO" quando l'articolo non è disponibile.
Aggiungere Elementi di Testo a un Menu Board Digitale
Prima, create il vostro design. Potete creare il vostro menu all'interno della nostra app Designer.
Il modo più semplice per configurare un DMB è con un Ripetitore di Dati. Per una spiegazione completa delle capacità di un Ripetitore, consultate questo articolo. Qui, ci limiteremo a insegnare come aggiungere informazioni dal vostro sistema POS.
Per configurare un Ripetitore, cliccate "Ripetitori" → Aggiungi Ripetitore Vuoto.
Con il Ripetitore selezionato, cliccate Impostazioni. Quindi selezionate Connetti a DataSource sul Menu Laterale.
Selezionate la DataSource che avete configurato nell'ultimo passaggio sotto "Altre DataSource".
Verrete riportati all'ultimo pannello con la vostra DataSource ora selezionata. Ora, cliccate Modifica o fate doppio clic sul Ripetitore selezionato per andare all'Editor del Ripetitore. Questo è come un design-nel-design, specificamente per i vostri elementi del Ripetitore (menu). Con il testo selezionato, cliccate la freccia a sinistra.
Questo fa apparire la scheda DataSource. Cliccate sulla DataSource Utilizzata in questo Design e vedrete qualcosa di simile:
In questo esempio, vogliamo visualizzare il nome e il prezzo, con la possibilità di dire "ESAURITO"
Creando testo e trascinandoci i punti dati, possiamo creare una voce di menu come questa:
Questo è stato creato trovando punti dati dall'API e trascinandoli nelle caselle di testo desiderate. In questo caso, desideriamo visualizzare solo "nome" e "prezzo", quindi questi valori sono stati trascinati in una casella di testo vuota o esistente.
Se i vostri numeri necessitano di formattazione aggiuntiva, cliccate sul numero, poi premete Impostazioni.
Cliccate Opzioni Avanzate → "Formato Visualizzazione" e scegliete "Numero," quindi cliccate "Formato Numero" e selezionate la formattazione che desiderate. Questo vi permetterà di aggiungere il simbolo dell'euro ai vostri prezzi, con altre opzioni.
Assicuratevi di premere Aggiorna per far visualizzare il nuovo formato numerico.
Il valore di un ripetitore è che copierà il formato di questa singola cella, quindi sostituirà i punti dati con altri dalla vostra API. Fatto correttamente, il vostro menu dovrebbe apparire così:
Il Ripetitore recupererà tanti punti dati quanti ne avete configurati sulla vostra API. In questo esempio, abbiamo creato un menu con 9 articoli, ma con un design appropriato potete mettere quanti articoli desiderate, con descrizioni dinamiche. Se avete più articoli di quelli che avete impostato per essere visualizzati sul vostro schermo in una sola volta, gli articoli nel menu ruoteranno attraverso di essi finché non saranno stati tutti visualizzati.
Creare Testi Barrati e Avvisi di Esaurito
Nell'esempio sopra, mostriamo un avviso di Esaurito. Tuttavia, non vogliamo visualizzarlo sempre - solo quando l'articolo non è disponibile. Con OptiSync, questo può essere realizzato grazie all'elaborazione Post-richiesta che abbiamo fatto in precedenza. Il nostro codice ha creato questo dato "soldout: 0". Questo è collegato ai nostri dati "available":
Quando il dato "available" legge "true", il dato "soldout" legge 0. Quando il vostro sistema POS rileva che gli articoli non sono disponibili, il dato "available" leggerà "false". Questo farà sì che il dato "soldout" legga 1.
Possiamo utilizzare questa conoscenza per configurare i nostri avvisi di Esaurito e i testi barrati in modo che appaiano solo quando gli articoli non sono disponibili.
Tornando al nostro Editor del Ripetitore, possiamo cliccare su un pezzo di testo che vogliamo barrare e premere Impostazioni:
Nella scheda Impostazioni, premete Opzioni Avanzate.
Sotto Opzioni Avanzate, premete Mappatura Proprietà.
Appariranno due valori: Proprietà e Valore.
Sotto Proprietà, scegliete Barrato.
Sotto Valore, scegliete .soldout. Prima del "." ci sarà il nome della vostra Richiesta API.
Questo imposta il testo da barrare quando il dato "soldout" legge 1.
Possiamo ripetere questo con la scritta Esaurito, tranne che invece di Barrato, scegliete Visibile.
Questo farà apparire il testo Esaurito solo quando il dato "visible" legge 1 - in altre parole, quando il vostro prodotto è esaurito.
Il vostro menu finale dovrebbe apparire così:
Infine, siete pronti per Nominare e Salvare il vostro Design.
Inviare Menu Board Digitali agli Schermi
Portare il vostro nuovo DMB su uno schermo è relativamente semplice. Tornate agli schermi che avete configurato con i parametri di sostituzione in precedenza. Quindi, premete Modifica Schermo.
Sotto Tipo, scegliete asset, quindi selezionate il vostro asset DMB da riprodurre.
È tutto!
Dovreste essere in grado di creare un Menu Board Digitale con funzionalità di dati dinamici.
Se avete ulteriori domande, dubbi o feedback su OptiSigns, non esitate a contattare il nostro team di supporto all'indirizzo support@optisigns.com.