O OptiSync permite criar menus digitais dinâmicos através da integração de API. Os seus sistemas POS podem fazer interface diretamente com o OptiSigns para atualizar preços automaticamente, rastrear inventário e muito mais.
-
Como Integrar Sistemas POS Através de Pedidos de API
-
Como Criar Quadros de Menu Digital no Designer com OptiSync
- Enviar um Quadro de Menu Digital para um Ecrã
Neste artigo, vamos criar um Quadro de Menu Digital (DMB) real integrado com um sistema POS Clover. O DMB extrai informações de produtos do Clover e exibe-as no ecrã. Quando um item não está disponível, será exibido como "ESGOTADO".
| NOTA |
A Integração de API está apenas disponível com um plano Pro Plus ou superior. |
Como Integrar Sistemas POS Através de Pedidos de API
A maioria dos sistemas POS tem uma biblioteca de API que o OptiSigns pode usar para obter os dados relevantes do sistema programaticamente. Esta API pode devolver itens do menu, preço do item, disponibilidade e muito mais.
Com o OptiSync, podemos ligar APIs ao portal OptiSigns e enviar os dados para os ecrãs como um Quadro de Menu Digital (DMB) ou qualquer outro tipo de ecrã que desejar sem necessidade de intervenção humana.
Este artigo irá focar-se nestes detalhes específicos do POS, e no processo de mapear dados POS para ativos e enviá-los para ecrãs.
| IMPORTANTE |
| Para integrar um sistema POS, precisa primeiro de configurar um pedido de Gateway de API. Um guia completo sobre como fazê-lo pode ser encontrado aqui. |
Obter URL Endpoint da API e Configurar DataSource de Pedido de API
Temos um guia completo sobre como configurar o seu pedido de gateway de API. Recomendamos seguir este guia até o seu pedido inicial estar configurado.
No mínimo, precisará de um URL endpoint de API e um token de autenticação de API.
Informações Adicionais sobre Autenticação de API
Para a maioria das autenticações baseadas em token, configurar o token de autenticação com o armazenamento de chaves é normalmente tudo o que é necessário para um pedido de API. Mas certas APIs (como o Toast) exigirão chamadas adicionais para obter o token de autenticação para cada pedido, isto pode ser tratado através do processamento pré-pedido. Para ver como lidar com isso, consulte o nosso artigo sobre APIs Toast.
Gerir Múltiplas Lojas ou Localizações POS
Depois de configurar o seu pedido básico de Gateway de API, há alguns passos adicionais que deverá executar se tiver múltiplas localizações para os seus ecrãs. Estas diferentes localizações podem ter menus diferentes, ou ofertas especiais diferentes para esse dia, ou até preços diferentes dependendo de vários fatores.
Os sistemas POS normalmente exigem licenças separadas para cada localização. A API do seu sistema POS pode fornecer IDs de loja diferentes no endpoint da API ou usar tokens de autenticação diferentes. Para implementações maiores com múltiplas lojas, pode usar parâmetros de substituição para lidar com isso com o OptiSigns.
Existem duas formas de gerir múltiplas localizações POS:
- Configurar pedidos de API individuais para cada uma das suas localizações POS, alterando o valor no URL endpoint de cada vez e mapeando-os para cada um dos seus ecrãs individualmente. Se tiver apenas algumas localizações onde o seu sistema POS é usado, isto funcionará perfeitamente.
- (Recomendado) Configurar cada ecrã para enviar o seu storeID para a chamada de API, permitindo que um único pedido de API forneça dados a múltiplos ecrãs. Para mais de dois ou três ecrãs, recomendamos este método.
Veja como lidar com a opção 2.
Para começar, encontre o ecrã que deseja editar.
Clique em Avançado → Mais → Atributos Adicionais do Dispositivo.
Dois campos aparecerão, Chave e Valor.
- Chave - Um parâmetro que será usado durante a chamada de API para substituir pelo valor da sua loja. Isto substituirá parte do seu URL endpoint de API.
- Valor - Representa o código único associado à loja ou localização que deseja passar para a sua API.
Neste exemplo, vamos fingir que o parâmetro que está a alterar chama-se "merchantID". O valor inserido precisará de ser obtido do seu lado, pois será único.
Agora, volte à página de configuração do pedido de API. Substitua o merchantID no endpoint da API com o nome da Chave que definiu anteriormente.
Quando o pedido de API é acionado no dispositivo, ele pegará no valor do dispositivo e substituí-lo-á em tempo de execução. Para cada ecrã, deverá executar estes mesmos passos, mantendo o nome da Chave igual enquanto altera o Valor. Isto permitirá enviar dados diferentes para ecrãs diferentes a partir de um único Pedido de API.
Como Usar o Processamento Pós-Pedido para Converter Dados da API
Ao recuperar dados do seu sistema POS, eles podem não aparecer inicialmente exatamente como gostaria, ou pode querer adicionar alguma funcionalidade, como a capacidade de exibir ESGOTADO para itens fora de stock.
Por exemplo, os preços podem ser exibidos como números inteiros (ou seja, 1299 em vez de $12,99). É aqui que entra o separador "Pós-pedido" - isto permite que sejam feitas alterações aos dados depois de chegarem. Isto exigirá alguma codificação básica para usar.
Tome o exemplo da exibição de preço de antes. Como converteríamos um número como 1299 para exibir como $12,99, e tornar esse código extensível a quaisquer erros de exibição semelhantes (por exemplo, 1899 em vez de $18,99)?
Para este exemplo comum, este código JavaScript deve resolver o seu 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
Isto corrigirá os dados devolvidos, permitindo que sejam exibidos corretamente. Também permitirá a criação de ESGOTADO e riscado para quando os itens estão fora de stock.
| NOTA: Ativar e configurar um WebHook permite a atualização quase em tempo real dos dados extraídos da sua API. Se planeia acompanhar o inventário da loja usando os seus sinais digitais, recomendamos configurar um. Precisará de inserir a chave WebHook fornecida na sua API para configurar isto. |
Como Criar Quadros de Menu Digital no Designer com OptiSync
Para criar um DMB com dados do seu sistema POS, o Pedido de API precisará de ser registado como um DataSource. Isto permite que elementos de dados sejam adicionados à aplicação Designer do OptiSigns, onde pode ser formatado e incorporado em qualquer design visual que deseje exibir.
A aplicação Designer e os modelos podem ser usados para fazer a formatação e mapear o elemento para os dados da fonte de dados da API. Qualquer caixa de texto ou elemento de imagem pode ser mapeado no Designer. Quando mapeia um elemento de imagem, o URL da imagem será substituído em tempo de execução.
Usar DataSources e Repetidores
Para começar, encontre o seu design ou crie um novo no separador Ficheiros/Ativos.
Com o design aberto, clique em "DataSource" na coluna da esquerda. Depois, clique em "Adicionar DataSource" para adicionar uma fonte de dados de API ao design.
Desloque-se para baixo até onde diz "Coleção de Gateway de API" e clique nela.
Também pode configurar um Gateway único com o comando Gateway de API se precisar de um design único sem processamento pré ou pós-pedido. No nosso exemplo, no entanto, estamos a fazê-lo, por isso usaremos a Coleção de Gateway.
Deverá ver este ecrã:
- Nome - O nome do DataSource. Isto é interno e não será mostrado nos seus ecrãs.
- Selecionar APIs - Aqui selecionará entre os Gateways de API que já configurou nos passos anteriores. Pode selecionar apenas um ou vários. Se vários forem selecionados, o DataSource de API agregá-los-á automaticamente.
- Intervalo de Atualização - Com que frequência enviar pedidos de volta à API para atualizações. Selecione entre Nenhum (nunca chamar a API de volta), 30 minutos, 60 minutos ou a cada 6 horas. Se Ativar WebHook no seu Pedido de API e inserir o URL fornecido na sua API, este Intervalo de Atualização mudará para quase tempo real.
Clique em Guardar, e o DataSource é criado.
Deve aparecer na coluna da esquerda sob "Usado neste design". Definitivamente aparecerá na secção "Outros DataSources" . Pode precisar de atualizar a página para que apareça.
Mapeamento de Elementos
Agora que o seu DataSource de API foi criado, estamos prontos para mapear os dados. Neste exemplo, mostraremos como fazer um DMB com a capacidade de riscar nomes de produtos e exibir a frase "ESGOTADO" quando o item está fora de stock.
Adicionar Elementos de Texto a um Quadro de Menu Digital
Primeiro, crie o seu design. Pode criar o seu menu dentro da nossa aplicação Designer.
A maneira mais fácil de configurar um DMB é com um Repetidor de Dados. Para uma análise completa das capacidades de um Repetidor, veja este artigo. Aqui, vamos concentrar-nos em ensinar como adicionar informações do seu sistema POS.
Para configurar um Repetidor, clique em "Repetidores" → Adicionar Repetidor em Branco.
Com o Repetidor selecionado, clique em Definições. Depois selecione Conectar ao DataSource no Menu Lateral.
Selecione o DataSource que configurou no último conjunto em "Outros DataSources".
Será levado de volta ao último painel com o seu DataSource agora selecionado. Agora, clique em Editar ou faça duplo clique no Repetidor selecionado para ir ao Editor de Repetidor. É como um design-dentro-de-um-design, especificamente para os seus itens do Repetidor (menu). Com o texto selecionado, clique na seta à esquerda.
Isso abre o separador DataSource. Clique no DataSource Usado neste Design e verá algo assim:
Neste exemplo, queremos exibir o nome e o preço, com a possibilidade de dizer "ESGOTADO"
Ao criar texto e arrastar pontos de dados para ele, podemos criar um item de menu assim:
Isto foi criado encontrando pontos de dados da API e arrastando-os para as caixas de texto desejadas. Neste caso, apenas desejamos exibir o "nome" e o "preço", por isso esses valores foram o que arrastámos para uma caixa de texto em branco ou existente.
Se os seus números precisarem de formatação extra, clique no número e depois clique em Definições.
Clique em Opções Avançadas → "Formato de Exibição" e escolha "Número," depois clique em "Formato de Número" e selecione a formatação que deseja. Isto permitirá adicionar cifrões aos seus preços, com outras opções.
Certifique-se de clicar em Atualizar para fazer o seu novo formato de número aparecer.
O valor de um repetidor é que ele copiará o formato desta célula e depois substituirá os pontos de dados por outros da sua API. Feito corretamente, o seu menu deve parecer-se com isto:
O Repetidor extrairá tantos pontos de dados quantos você configurou na sua API. Neste exemplo, fizemos um menu com 9 itens, mas com o design adequado pode colocar tantos itens quanto desejar, com descrições dinâmicas também. Se tiver mais itens do que aqueles que definiu para mostrar no seu ecrã de cada vez, os itens no menu rodarão através deles até que todos tenham sido exibidos.
Criar Riscados e Avisos de Esgotado
No exemplo acima, mostramos um aviso de Esgotado. No entanto, não queremos exibir isso o tempo todo - apenas quando o item não está disponível. Com o OptiSync, isto pode ser realizado graças ao processamento Pós-pedido que fizemos anteriormente. O nosso código criou estes dados "soldout: 0". Isto está ligado aos nossos dados "available":
Quando os dados "available" leem "true", os dados "soldout" leem 0. Quando o seu sistema POS deteta que os itens não estão disponíveis, os dados "available" lerão "false". Isto fará com que os dados "soldout" leiam 1.
Podemos usar este conhecimento para configurar os nossos avisos de Esgotado e riscados para aparecerem apenas quando os itens não estão disponíveis.
Voltando ao nosso Editor de Repetidor, podemos clicar num pedaço de texto que queremos riscar e clicar em Definições:
No separador Definições, clique em Opções Avançadas.
Em Opções Avançadas, clique em Mapeamento de Propriedade.
Dois valores aparecerão: Propriedade e Valor.
Em Propriedade, escolha Riscado.
Em Valor, escolha .soldout. Antes do "." estará o nome do seu Pedido de API.
Isto define o texto para ser riscado quando os dados "soldout" leem 1.
Podemos repetir isto com a leitura Esgotado, exceto que em vez de Riscado, escolha Visível.
Isto fará com que o texto Esgotado apareça apenas quando os dados "visible" lerem 1 - por outras palavras, quando o seu produto está esgotado.
O seu menu final deve parecer-se com isto:
Finalmente, está pronto para Nomear e Guardar o seu Design.
Enviar Quadros de Menu Digital para Ecrãs
Colocar o seu novo DMB num ecrã é relativamente simples. Volte aos ecrãs que configurou com parâmetros de substituição anteriormente. Depois, clique em Editar Ecrã.
Em Tipo, escolha ativo, depois selecione o seu ativo DMB para reproduzir.
É tudo!
Deverá ser capaz de criar um Quadro de Menu Digital com funcionalidades de dados dinâmicos.
Se tiver quaisquer perguntas adicionais, preocupações ou qualquer feedback sobre o OptiSigns, sinta-se à vontade para contactar a nossa equipa de suporte em support@optisigns.com.