OptiSync vous permet de créer des menus numériques dynamiques grâce à l'intégration API. Vos systèmes de point de vente (POS) peuvent s'interfacer directement avec OptiSigns pour mettre à jour automatiquement les prix, suivre l'inventaire, et plus encore.
-
Comment intégrer les systèmes POS via des requêtes API
-
Comment créer des tableaux de menus numériques dans Designer avec OptiSync
- Diffuser un tableau de menu numérique sur un écran
Dans cet article, nous allons créer un véritable tableau de menu numérique (DMB) intégré avec un système POS Clover. Le DMB récupère les informations produit depuis Clover et les affiche à l'écran. Lorsqu'un article n'est pas disponible, il s'affichera comme "ÉPUISÉ."
| NOTE |
L'intégration API n'est disponible qu'avec un forfait Pro Plus ou supérieur. |
Comment intégrer les systèmes POS via des requêtes API
La plupart des systèmes POS disposent d'une bibliothèque API qu'OptiSigns peut utiliser pour obtenir les données pertinentes du système de manière programmatique. Cette API peut renvoyer les éléments du menu, le prix des articles, la disponibilité, et plus encore.
Avec OptiSync, nous pouvons lier les API au portail OptiSigns et transmettre les données aux écrans sous forme de tableau de menu numérique (DMB) ou tout autre type d'écran que vous souhaitez sans intervention humaine.
Cet article se concentrera sur ces particularités spécifiques aux POS, et le processus de mappage des données POS aux ressources et leur diffusion sur les écrans.
| IMPORTANT |
| Pour intégrer un système POS, vous devrez d'abord configurer une requête de passerelle API. Un guide complet sur comment faire cela peut être trouvé ici. |
Obtenir l'URL du point de terminaison API et configurer la source de données de requête API
Nous avons un guide complet sur comment configurer votre requête de passerelle API. Nous recommandons de suivre ce guide jusqu'à ce que votre requête initiale soit configurée.
Au minimum, vous aurez besoin d'une URL de point de terminaison API et d'un jeton d'authentification API.
Informations supplémentaires sur l'authentification API
Pour la plupart des authentifications basées sur des jetons, la configuration du jeton d'authentification avec le magasin de clés est normalement tout ce qui est requis pour une requête API. Mais certaines API (comme Toast) nécessiteront des appels supplémentaires pour obtenir le jeton d'authentification pour chaque requête, cela peut être géré par le traitement pré-requête. Pour voir comment gérer cela, consultez notre article sur les API Toast.
Gestion de plusieurs magasins ou emplacements POS
Une fois que vous avez configuré votre requête de passerelle API de base, il y a quelques étapes supplémentaires que vous voudrez effectuer si vous avez plusieurs emplacements pour vos écrans. Ces différents emplacements peuvent avoir des menus différents, ou des promotions différentes pour ce jour-là, ou même des prix différents selon divers facteurs.
Les systèmes POS nécessitent normalement une licence séparée pour chaque emplacement. L'API de votre système POS peut fournir un ID de magasin différent dans le point de terminaison API ou utiliser un jeton d'authentification différent. Pour les déploiements plus importants avec plusieurs magasins, vous pouvez utiliser des paramètres de substitution pour gérer cela avec OptiSigns.
Il y a deux façons de gérer plusieurs emplacements POS :
- Configurer des requêtes API individuelles pour chacun de vos emplacements POS, en changeant la valeur dans le point de terminaison URL à chaque fois et en les mappant à chacun de vos écrans individuellement. Si vous n'avez que quelques emplacements où votre système POS est utilisé, cela fonctionnera très bien.
- (Recommandé) Configurer chaque écran pour envoyer son storeID à l'appel API, permettant à une seule requête API de fournir des données à plusieurs écrans. Pour plus de deux ou trois écrans, nous recommandons cette méthode.
Voici comment gérer l'option 2.
Pour commencer, trouvez l'écran que vous souhaitez modifier.
Cliquez sur Avancé → Plus → Attributs supplémentaires du dispositif.
Deux champs apparaîtront, Clé et Valeur.
- Clé - Un paramètre qui sera utilisé pendant l'appel API pour substituer la valeur de votre magasin. Cela remplacera une partie de votre URL de point de terminaison API.
- Valeur - Représente le code unique associé au magasin ou à l'emplacement que vous souhaitez transmettre à votre API.
Dans cet exemple, nous allons prétendre que le paramètre que vous modifiez s'appelle "merchantID". La valeur saisie devra être obtenue de votre côté car elle sera unique.
Maintenant, retournez à la page de configuration de la requête API. Substituez le merchantID dans le point de terminaison API avec le nom de clé que vous avez précédemment défini.
Lorsque la requête API est déclenchée sur l'appareil, elle prendra la valeur de l'appareil et la substituera à l'exécution. Pour chaque écran, vous voudrez effectuer ces mêmes étapes, en gardant le nom de la clé identique tout en changeant la valeur. Cela vous permettra de transmettre des données différentes à différents écrans à partir d'une seule requête API.
Comment utiliser le traitement post-requête pour convertir les données API
Lors de la récupération des données de votre système POS, elles peuvent ne pas s'afficher initialement exactement comme vous le souhaitez, ou vous pourriez vouloir ajouter certaines fonctionnalités, comme la capacité d'afficher ÉPUISÉ pour les articles en rupture de stock.
Par exemple, les prix peuvent s'afficher comme des nombres entiers (c.-à-d. 1299 au lieu de 12,99 $). C'est là que l'onglet "Post-requête" entre en jeu - cela permet d'apporter des modifications aux données après leur arrivée. Cela nécessitera un peu de codage de base pour être utilisé.
Prenons l'exemple de l'affichage du prix mentionné plus tôt. Comment convertir un nombre comme 1299 pour l'afficher comme 12,99 $, et rendre ce morceau de code extensible à toute erreur d'affichage similaire (par exemple 1899 au lieu de 18,99 $) ?
Pour cet exemple courant, ce morceau de code JavaScript devrait résoudre votre problème.
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
Cela corrigera les données renvoyées, permettant leur affichage correct. Cela permettra également la création d'ÉPUISÉ et de texte barré lorsque les articles sont en rupture de stock.
| NOTE : L'activation et la configuration d'un WebHook permettent la mise à jour en temps quasi réel des données extraites de votre API. Si vous prévoyez de suivre l'inventaire du magasin à l'aide de vos écrans numériques, nous recommandons d'en configurer un. Vous devrez saisir la clé WebHook fournie dans votre API pour configurer cela. |
Comment créer des tableaux de menus numériques dans Designer avec OptiSync
Pour créer un DMB avec des données de votre système POS, la requête API devra être enregistrée comme source de données. Cela permet d'ajouter des éléments de données à l'application Designer d'OptiSigns, où ils peuvent être formatés et incorporés dans n'importe quel design visuel que vous souhaitez afficher.
L'application Designer et les modèles peuvent être utilisés pour effectuer le formatage et mapper l'élément aux données de la source de données API. Toute zone de texte ou élément d'image peut être mappé dans Designer. Lorsque vous mappez un élément d'image, l'URL de l'image sera remplacée à l'exécution.
Utilisation des sources de données et des répéteurs
Pour commencer, trouvez votre design ou créez-en un nouveau dans l'onglet Fichiers/Ressources.
Avec le design ouvert, cliquez sur "Source de données" dans la colonne de gauche. Ensuite, cliquez sur "Ajouter une source de données" pour ajouter une source de données API au design.
Faites défiler jusqu'à où il est écrit "Collection de passerelle API" et cliquez dessus.
Vous pouvez également configurer une passerelle ponctuelle avec la commande Passerelle API si vous avez besoin d'un design unique sans traitement pré- ou post-requête. Dans notre exemple, cependant, nous en avons besoin, donc nous utiliserons Collection de passerelle.
Vous devriez voir cet écran :
- Nom - Le nom de la source de données. C'est interne et ne sera pas affiché sur vos écrans.
- Sélectionner des API - Ici, vous sélectionnerez parmi les passerelles API que vous avez déjà configurées dans les étapes précédentes. Vous pouvez en sélectionner une seule ou plusieurs. Si plusieurs sont sélectionnées, la source de données API les agrégera automatiquement.
- Intervalle de mise à jour - À quelle fréquence envoyer des requêtes à l'API pour les mises à jour. Sélectionnez parmi Aucun (ne jamais rappeler l'API), 30 minutes, 60 minutes, ou toutes les 6 heures. Si vous activez WebHook sur votre requête API et saisissez l'URL fournie dans votre API, cet intervalle de mise à jour passera en temps quasi réel.
Cliquez sur Enregistrer, et la source de données est créée.
Elle devrait apparaître dans la colonne de gauche sous "Utilisé dans ce design". Elle apparaîtra définitivement dans la section "Autres sources de données" . Vous devrez peut-être actualiser la page pour qu'elle apparaisse.
Mappage des éléments
Maintenant que votre source de données API a été créée, nous sommes prêts à mapper les données. Dans cet exemple, nous vous montrerons comment créer un DMB avec la capacité de barrer les noms de produits et d'afficher la phrase "ÉPUISÉ" lorsque l'article est en rupture de stock.
Ajouter des éléments de texte à un tableau de menu numérique
D'abord, créez votre design. Vous pouvez créer votre menu dans notre application Designer.
La façon la plus simple de configurer un DMB est avec un répéteur de données. Pour une présentation complète des capacités d'un répéteur, voir cet article. Ici, nous nous en tiendrons à enseigner comment ajouter des informations de votre système POS.
Pour configurer un répéteur, cliquez sur "Répéteurs" → Ajouter un répéteur vide.
Avec le répéteur sélectionné, cliquez sur Paramètres. Ensuite, sélectionnez Connecter à la source de données dans le menu latéral.
Sélectionnez la source de données que vous avez configurée dans le dernier ensemble sous "Autres sources de données".
Vous serez renvoyé au dernier volet avec votre source de données maintenant sélectionnée. Maintenant, cliquez sur Modifier ou double-cliquez sur le répéteur sélectionné pour accéder à l'éditeur de répéteur. C'est comme un design dans un design, spécifiquement pour vos éléments de répéteur (menu). Avec le texte sélectionné, cliquez sur la flèche à gauche.
Cela fait apparaître l'onglet Source de données. Cliquez sur la source de données utilisée dans ce design et vous verrez quelque chose comme ceci :
Dans cet exemple, nous voulons afficher le nom et le prix, avec la possibilité de dire "ÉPUISÉ"
En créant du texte et en y faisant glisser des points de données, nous pouvons créer un élément de menu comme celui-ci :
Cela a été créé en trouvant des points de données de l'API et en les faisant glisser dans les zones de texte désirées. Dans ce cas, nous souhaitons uniquement afficher le "nom" et le "prix", donc ces valeurs étaient celles que nous avons fait glisser dans une zone de texte vierge ou existante.
Si vos nombres nécessitent un formatage supplémentaire, cliquez sur le nombre, puis appuyez sur Paramètres.
Cliquez sur Options avancées → "Format d'affichage" et choisissez "Nombre," puis cliquez sur "Format de nombre" et sélectionnez le formatage que vous souhaitez. Cela vous permettra d'ajouter des signes dollar à vos prix, avec d'autres options.
Assurez-vous de cliquer sur Mettre à jour pour faire afficher votre nouveau format de nombre.
La valeur d'un répéteur est qu'il copiera le format de cette cellule unique, puis remplacera les points de données par d'autres de votre API. Correctement fait, votre menu devrait ressembler à quelque chose comme ceci :
Le répéteur extraira autant de points de données que vous avez configurés sur votre API. Dans cet exemple, nous avons créé un menu avec 9 éléments, mais avec une conception appropriée, vous pouvez mettre autant d'éléments que vous le souhaitez, avec des descriptions dynamiques également. Si vous avez plus d'éléments que ce que vous avez configuré pour afficher sur votre écran à un moment donné, les éléments du menu feront défiler jusqu'à ce qu'ils aient tous été affichés.
Créer des textes barrés et des avertissements d'épuisement
Dans l'exemple ci-dessus, nous montrons un avertissement Épuisé. Cependant, nous ne voulons pas l'afficher tout le temps - seulement lorsque l'article n'est pas disponible. Avec OptiSync, cela peut être accompli grâce au traitement post-requête que nous avons fait plus tôt. Notre code a créé cette donnée "soldout: 0". C'est lié à notre donnée "available" :
Lorsque la donnée "available" indique "true", la donnée "soldout" indique 0. Lorsque votre système POS détecte que des articles ne sont pas disponibles, la donnée "available" indiquera "false". Cela fera que la donnée "soldout" indique 1.
Nous pouvons utiliser cette connaissance pour configurer nos avertissements Épuisé et les textes barrés pour qu'ils n'apparaissent que lorsque les articles ne sont pas disponibles.
En revenant à notre éditeur de répéteur, nous pouvons cliquer sur un morceau de texte que nous voulons barrer et appuyer sur Paramètres :
Dans l'onglet Paramètres, appuyez sur Options avancées.
Sous Options avancées, appuyez sur Mappage de propriété.
Deux valeurs apparaîtront : Propriété et Valeur.
Sous Propriété, choisissez Barré.
Sous Valeur, choisissez .soldout. Avant le "." sera le nom de votre requête API.
Cela configure le texte pour être barré lorsque la donnée "soldout" indique 1.
Nous pouvons répéter cela avec la lecture Épuisé, sauf qu'au lieu de Barré, choisissez Visible.
Cela fera apparaître le texte Épuisé uniquement lorsque la donnée "visible" indique 1 - en d'autres termes, lorsque votre produit est épuisé.
Votre menu final devrait ressembler à quelque chose comme ceci :
Enfin, vous êtes prêt à nommer et enregistrer votre design.
Diffuser des tableaux de menus numériques sur des écrans
Afficher votre nouveau DMB sur un écran est relativement simple. Retournez aux écrans que vous avez configurés avec des paramètres de substitution plus tôt. Ensuite, appuyez sur Modifier l'écran.
Sous Type, choisissez ressource, puis sélectionnez votre ressource DMB à diffuser.
C'est tout !
Vous devriez être capable de créer un tableau de menu numérique avec des fonctionnalités de données dynamiques.
Si vous avez des questions supplémentaires, des préoccupations ou des commentaires sur OptiSigns, n'hésitez pas à contacter notre équipe de support à support@optisigns.com.