OptiSync le permite crear menús digitales dinámicos mediante la integración de API. Sus sistemas POS pueden interactuar directamente con OptiSigns para actualizar precios automáticamente, rastrear inventario y más.
-
Cómo integrar sistemas POS mediante solicitudes de API
-
Cómo construir menús digitales en Designer con OptiSync
- Enviar un menú digital a una pantalla
En este artículo, crearemos un menú digital real (DMB) integrado con un sistema POS Clover. El DMB extrae información de productos de Clover y la muestra en pantalla. Cuando un artículo no está disponible, se mostrará como "AGOTADO".
| NOTA |
La integración de API solo está disponible con un plan Pro Plus o superior. |
Cómo integrar sistemas POS mediante solicitudes de API
La mayoría de los sistemas POS tienen una biblioteca de API que OptiSigns puede usar para obtener los datos relevantes del sistema de forma programática. Esta API puede devolver elementos del menú, precios de artículos, disponibilidad y más.
Con OptiSync, podemos vincular APIs al portal OptiSigns y enviar los datos a las pantallas como un menú digital (DMB) o cualquier otro tipo de pantalla que desee sin necesidad de intervención humana.
Este artículo se centrará en estas particularidades específicas del POS y el proceso de mapear datos del POS a activos y enviarlos a las pantallas.
| IMPORTANTE |
| Para integrar un sistema POS, primero deberá configurar una solicitud de puerta de enlace API. Puede encontrar una guía completa sobre cómo hacerlo aquí. |
Obtener el endpoint de URL de API y configurar la fuente de datos de solicitud de API
Tenemos una guía completa sobre cómo configurar su solicitud de puerta de enlace API. Recomendamos seguir esta guía hasta que su solicitud inicial esté configurada.
Como mínimo, necesitará un endpoint de URL de API y un token de autenticación de API.
Información adicional sobre la autenticación de API
Para la mayoría de las autenticaciones basadas en token, configurar el token de autenticación con el almacén de claves es normalmente todo lo que se requiere para una solicitud de API. Pero ciertas APIs (como Toast) requerirán llamadas adicionales para obtener el token de autenticación para cada solicitud, esto se puede manejar a través del procesamiento previo a la solicitud. Para ver cómo manejar esto, consulte nuestro artículo sobre las APIs de Toast.
Manejo de múltiples tiendas o ubicaciones POS
Una vez que haya configurado su solicitud básica de puerta de enlace API, hay algunos pasos adicionales que querrá realizar si tiene múltiples ubicaciones para sus pantallas. Estas diferentes ubicaciones pueden tener diferentes menús, o diferentes especiales para ese día, o incluso diferentes precios según varios factores.
Los sistemas POS normalmente requieren licencias separadas para cada ubicación. La API de su sistema POS puede proporcionar diferentes ID de tienda en el endpoint de API o usar diferentes tokens de autenticación. Para implementaciones más grandes con múltiples tiendas, puede usar parámetros de sustitución para manejar eso con OptiSigns.
Hay dos formas de manejar múltiples ubicaciones POS:
- Configurar solicitudes de API individuales para cada una de sus ubicaciones POS, cambiando el valor en el endpoint de URL cada vez y mapeándolas a cada una de sus pantallas individualmente. Si solo tiene unas pocas ubicaciones donde se usa su sistema POS, esto funcionará bien.
- (Recomendado) Configurar cada pantalla para enviar su storeID a la llamada de API, permitiendo que una sola solicitud de API proporcione datos a múltiples pantallas. Para más de dos o tres pantallas, recomendamos este método.
Así es como manejar la opción 2.
Para comenzar, encuentre la pantalla que desea editar.
Haga clic en Avanzado → Más → Atributos adicionales del dispositivo.
Aparecerán dos campos, Clave y Valor.
- Clave - Un parámetro que se usará durante la llamada de API para sustituir el valor de su tienda. Esto reemplazará parte de su endpoint de URL de API.
- Valor - Representa el código único asociado con la tienda o ubicación que desea pasar a su API.
En este ejemplo, pretenderemos que el parámetro que está cambiando se llama "merchantID". El valor ingresado deberá obtenerse por su parte ya que será único.
Ahora, vuelva a la página de configuración de solicitud de API. Sustituya el merchantID en el endpoint de API con el nombre de clave que definió anteriormente.
Cuando se active la solicitud de API en el dispositivo, tomará el valor del dispositivo y lo sustituirá en tiempo de ejecución. Para cada pantalla, querrá realizar estos mismos pasos, manteniendo el nombre de la clave igual mientras cambia el valor. Esto le permitirá enviar diferentes datos a diferentes pantallas desde una sola solicitud de API.
Cómo usar el procesamiento post-solicitud para convertir datos de API
Al recuperar datos de su sistema POS, es posible que inicialmente no aparezcan exactamente como le gustaría, o puede que desee agregar alguna funcionalidad, como la capacidad de mostrar AGOTADO para artículos sin existencias.
Por ejemplo, los precios pueden mostrarse como números enteros (es decir, 1299 en lugar de $12.99). Ahí es donde entra la pestaña "Post-solicitud": esto permite realizar cambios en los datos después de que entren. Esto requerirá algo de codificación básica para usar.
Tome el ejemplo de la visualización de precios de antes. ¿Cómo convertiríamos un número como 1299 para que se muestre como $12.99, y hacer que esa pieza de código sea extensible a cualquier error de visualización similar (por ejemplo, 1899 en lugar de $18.99)?
Para este ejemplo común, esta pieza de código JavaScript debería resolver su 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
Esto corregirá los datos devueltos, permitiendo que se muestren correctamente. También permitirá la creación de AGOTADO y tachado cuando los artículos estén fuera de stock.
| NOTA: Habilitar y configurar un WebHook permite la actualización casi en tiempo real de los datos extraídos de su API. Si planea realizar un seguimiento del inventario de la tienda usando sus letreros digitales, recomendamos configurar uno. Deberá ingresar la clave de WebHook proporcionada en su API para configurar esto. |
Cómo construir menús digitales en Designer con OptiSync
Para crear un DMB con datos de su sistema POS, la solicitud de API deberá registrarse como una fuente de datos. Esto permite agregar elementos de datos a la aplicación Designer de OptiSigns, donde se puede formatear e incorporar en cualquier diseño visual que desee mostrar.
La aplicación Designer y las plantillas se pueden usar para hacer el formateo y mapear el elemento a los datos de la fuente de datos de API. Cualquier cuadro de texto o elemento de imagen se puede mapear en Designer. Cuando mapea un elemento de imagen, la URL de la imagen será reemplazada en tiempo de ejecución.
Uso de fuentes de datos y repetidores
Para comenzar, encuentre su diseño o cree uno nuevo en la pestaña Archivos/Activos.
Con el diseño abierto, haga clic en "Fuente de datos" en la columna izquierda. Luego, haga clic en "Agregar fuente de datos" para agregar una fuente de datos de API al diseño.
Desplácese hacia abajo hasta donde dice "Colección de puerta de enlace API" y haga clic en ella.
También puede configurar una puerta de enlace única con el comando Puerta de enlace API si necesita un diseño único sin procesamiento previo o posterior a la solicitud. Sin embargo, en nuestro ejemplo, sí lo hacemos, así que usaremos Colección de puerta de enlace.
Debería ver esta pantalla:
- Nombre - El nombre de la fuente de datos. Esto es interno y no se mostrará en sus pantallas.
- Seleccionar APIs - Aquí seleccionará de las puertas de enlace API que ya configuró en pasos anteriores. Puede seleccionar solo una o varias. Si se seleccionan varias, la fuente de datos de API las agregará automáticamente.
- Intervalo de actualización - Con qué frecuencia enviar solicitudes de vuelta a la API para actualizaciones. Seleccione entre Ninguno (nunca volver a llamar a la API), 30 minutos, 60 minutos o cada 6 horas. Si habilita WebHook en su solicitud de API e ingresa la URL proporcionada en su API, este intervalo de actualización cambiará a casi tiempo real.
Presione Guardar, y la fuente de datos será creada.
Debería aparecer en la columna izquierda bajo "Usado en este diseño". Definitivamente aparecerá en la sección "Otras fuentes de datos" . Es posible que deba actualizar la página para que aparezca.
Mapeo de elementos
Ahora que su fuente de datos de API ha sido creada, estamos listos para mapear los datos. En este ejemplo, le mostraremos cómo hacer un DMB con la capacidad de tachar nombres de productos y mostrar la frase "AGOTADO" cuando el artículo esté fuera de stock.
Agregar elementos de texto a un menú digital
Primero, cree su diseño. Puede crear su menú dentro de nuestra aplicación Designer.
La forma más fácil de configurar un DMB es con un Repetidor de datos. Para un desglose completo de las capacidades de un repetidor, vea este artículo. Aquí, nos limitaremos a enseñar cómo agregar información de su sistema POS.
Para configurar un repetidor, haga clic en "Repetidores" → Agregar repetidor en blanco.
Con el repetidor seleccionado, haga clic en Configuración. Luego seleccione Conectar a fuente de datos en el menú lateral.
Seleccione la fuente de datos que configuró en el último conjunto bajo "Otras fuentes de datos".
Será llevado de vuelta al último panel con su fuente de datos ahora seleccionada. Ahora, haga clic en Editar o haga doble clic en el repetidor seleccionado para ir al Editor de repetidores. Esto es como un diseño dentro de un diseño, específicamente para sus elementos del repetidor (menú). Con el texto seleccionado, haga clic en la flecha de la izquierda.
Eso abre la pestaña de fuente de datos. Haga clic en la fuente de datos usada en este diseño y verá algo como esto:
En este ejemplo, queremos mostrar el nombre y el precio, con la posibilidad de decir "AGOTADO"
Al crear texto y arrastrar puntos de datos a él, podemos crear un elemento de menú como este:
Esto se creó encontrando puntos de datos de la API y arrastrándolos a los cuadros de texto deseados. En este caso, solo deseamos mostrar el "nombre" y el "precio", por lo que esos valores fueron lo que arrastramos a un cuadro de texto en blanco o existente.
Si sus números necesitan formato adicional, haga clic en el número, luego presione Configuración.
Haga clic en Opciones avanzadas → "Formato de visualización" y elija "Número," luego haga clic en "Formato de número" y seleccione el formato que desee. Esto le permitirá agregar signos de dólar a sus precios, con otras opciones.
Asegúrese de presionar Actualizar para mostrar su nuevo formato de número.
El valor de un repetidor es que copiará el formato de esta celda, luego reemplazará los puntos de datos con otros de su API. Hecho correctamente, su menú debería verse algo así:
El repetidor extraerá tantos puntos de datos como haya configurado en su API. En este ejemplo, hemos creado un menú con 9 elementos, pero con el diseño adecuado puede poner tantos elementos como desee, con descripciones dinámicas también. Si tiene más elementos de los que ha configurado para mostrar en su pantalla en un momento dado, los elementos del menú rotarán a través de ellos hasta que todos se hayan mostrado.
Crear texto tachado y advertencias de agotado
En el ejemplo anterior, mostramos una advertencia de agotado. Sin embargo, no queremos mostrar eso todo el tiempo, solo cuando el artículo no esté disponible. Con OptiSync, esto se puede lograr gracias al procesamiento post-solicitud que hicimos anteriormente. Nuestro código creó estos datos "soldout: 0". Esto está vinculado a nuestros datos "available":
Cuando los datos de "available" muestran "true", los datos de "soldout" muestran 0. Cuando su sistema POS detecta que los artículos no están disponibles, los datos de "available" mostrarán "false". Esto hará que los datos de "soldout" muestren 1.
Podemos usar este conocimiento para configurar nuestras advertencias de agotado y texto tachado para que solo aparezcan cuando los artículos no estén disponibles.
Volviendo a nuestro Editor de repetidores, podemos hacer clic en un texto que queremos tachar y presionar Configuración:
En la pestaña Configuración, presione Opciones avanzadas.
En Opciones avanzadas, presione Mapeo de propiedades.
Aparecerán dos valores: Propiedad y Valor.
En Propiedad, elija Tachado.
En Valor, elija .soldout. Antes del "." estará el nombre de su solicitud de API.
Esto configura el texto para que se tache cuando los datos de "soldout" muestren 1.
Podemos repetir esto con la lectura de Agotado, excepto que en lugar de Tachado, elija Visible.
Esto hará que el texto de Agotado solo aparezca cuando los datos "visible" muestren 1, en otras palabras, cuando su producto esté agotado.
Su menú final debería verse algo así:
Finalmente, está listo para nombrar y Guardar su diseño.
Enviar menús digitales a pantallas
Poner su nuevo DMB en una pantalla es relativamente simple. Vuelva a las pantallas que configuró con parámetros de sustitución anteriormente. Luego, presione Editar pantalla.
En Tipo, elija activo, luego seleccione su activo DMB para reproducir.
¡Eso es todo!
Debería poder crear un menú digital con funciones de datos dinámicos.
Si tiene preguntas adicionales, inquietudes o comentarios sobre OptiSigns, no dude en comunicarse con nuestro equipo de soporte en support@optisigns.com.