Электронная очередь iiko: табло готовности заказов для гостей и как его настроить

Когда заказов много, гости у стойки выдачи переспрашивают «мой уже готов?», а курьеры толпятся у кухни. Электронная очередь iiko убирает эти вопросы с персонала: на экране в зале или в зоне выдачи видно, какие заказы готовятся, а какие уже можно забирать.

Электронная очередь (iikoArrivals) — это приложение в веб-офисе iiko, которое выводит на экраны ресторана стадии готовности заказов. Кроме номера и статуса на экране можно показать номер стола, время получения заказа, время ожидания, имя и телефон гостя, состав заказа. Гости отслеживают свои заказы, официанты и курьеры планируют работу. Оформление табло, тексты, реклама и звук настраиваются в веб-офисе без программирования.

В статье разбираем, как устроено приложение, что нужно для подключения и как настроить табло по шагам: контролы, темы, терминалы.

Как устроено приложение

Электронная очередь состоит из трёх разделов, которые настраиваются по очереди.

• Контролы — графические элементы с информацией о заказе, привязанной к статусу. Контрол собирается из мелких элементов, каждый из которых передаёт из iiko конкретные данные: номер заказа, имя гостя, время начала приготовления, номер стола, статус доставки. Для каждого статуса у контрола своё оформление: заказ в статусе «Готовится» выглядит одним образом, «Готово» — другим.
• Темы — готовый визуальный ряд для экрана: разметка, в которой размещены контролы, изображения, рекламные блоки, всплывающие окна и звуковые оповещения при смене статусов.
• Настройка терминалов — раздел, где тема и рекламная кампания привязываются к конкретной кассе, а для неё задаются источники заказов, формат времени и другие параметры. Это удобно сети: акции и формат обслуживания в разных ресторанах отличаются, а настраивается всё из одного веб-офиса.

Рекламные ролики и картинки для экранов хранятся в галерее и собираются в кампании в разделе «Экраны и звуки» → «Кампании».

Что нужно для подключения

• Плагин на кассе. На устройство с кассовым приложением iiko устанавливается плагин Resto.Front.Api.Arrivals — это делает поддерживающий партнёр. Для синхронизации с веб-офисом на кассе должен работать плагин Resto.Front.Api.Transport (iikoCloud).
• Доступ в Cloud API. В веб-офисе нужно разрешить работу экранов в нужных группах терминалов: на главной странице в разделе «Внешние заказы» откройте «Настройки Cloud API», вкладку «Организации», нажмите на название ресторана, в блоке «Разрешить доступ к терминальным группам» отметьте группы и сохраните. Остальные параметры можно оставить по умолчанию.

• Устройство для показа. Любое устройство с браузером в локальной сети кассы: в адресной строке указывается IP-адрес кассы с плагином и порт 9114. Если экран подключён к самой кассе вторым монитором, плагин может открыть табло отдельным окном без браузера. Если изображение повёрнуто не так, экран разворачивается на 90, 180 или 270 градусов прямо в кассовом приложении: «Дополнения» → «Дисплей Arrivals».

Плагин периодически запрашивает у веб-офиса актуальные настройки и кеширует материалы на кассе, поэтому после изменения темы ничего перезапускать не нужно. При запуске кассы плагин регистрирует её в веб-офисе — касса появляется в разделе «Настройка терминалов».

Настройки плагина, о которых стоит знать заранее:

• режим работы без кухни — для заведений, где кухонные заказы не используются: статусы берутся с самого заказа, после печати пречека заказ показывается как «Готовится», после оплаты — как «Приготовлен»;
• скрытие внешних номеров — табло показывает только внутренний номер заказа, даже если у заказа есть номер от агрегатора;
• уведомление стороннего сервиса — при переходе заказа в статус «Приготовлено» плагин может отправлять запрос на указанный адрес, например в систему оповещения гостей.

Эти параметры задаются в конфигурации плагина на кассе — попросите партнёра включить нужные при установке.

Запуск приложения

Авторизуйтесь в веб-офисе iiko и в разделе «Экраны и звуки» откройте «Электронная очередь». В некоторых версиях веб-офиса приложение называется «Дисплей Arrivals», а раздел терминалов — «Настройка экранов»: логика та же. Дальше три шага: создать или скопировать контролы, собрать тему и привязать её к терминалам.

Шаг 1. Контролы: как заказ выглядит на экране

В разделе «Контролы» есть преднастроенные контролы iiko и ваши собственные. Преднастроенные нельзя изменить или удалить, но можно скопировать — они лежат в папке «Контролы iiko», по умолчанию их четыре. Справа от списка показывается предпросмотр оформления контрола для каждого статуса.

Самый быстрый путь — взять готовый контрол за основу: выберите его в папке «Контролы iiko», нажмите кнопку копирования, откройте копию с окончанием _copy, измените нужные настройки, переименуйте и сохраните. Если нужен контрол с нуля, нажмите «Добавить»: откроется редактор с областью контрола, которую можно растянуть за границы и оформить цветом и рамкой. Все элементы размещаются внутри этой области, и именно она показывается в теме.

Статусы

Контрол настраивается для одного, нескольких или всех статусов из списка. Статусы сгруппированы по типу заказа: кухня и доставка. Редактируемый статус выделяется тёмно-серым фоном, и в рабочей области показывается контрол именно этого статуса. Когда в статус добавлены элементы, его название в списке становится жирным.

Оформление не нужно повторять для каждого статуса вручную: у статуса с настроенным контролом нажмите кнопку копирования стилей, затем кнопку добавления у нужных статусов — настройки перенесутся. Лишний стиль удаляется кнопкой напротив статуса.

Элементы

Нажмите «Добавить элемент» и выберите данные из списка. Элемент появится в левом верхнем углу области, его можно перетащить в любое место. Содержание элементов менять нельзя — только у элемента «Текст» вводится произвольное значение. Для всех элементов доступны настройки «Макет», «Граница», «Шрифт» и «Выравнивание».

У некоторых элементов есть дополнительные параметры:

• Номер заказа — максимальное количество символов в номере.
• Номер стола — какие столы показывать или скрывать. Так на табло выдачи не попадут заказы столов, которые обслуживают официанты.
• Номер телефона клиента — маска, которая скрывает часть номера на экране.
• Имя клиента — системное имя из карточки гостя или имя по умолчанию, например «Гость».
• Время — формат отображения: часы и минуты по умолчанию, можно добавить секунды или сменить разделитель.
• Состав заказа — можно показывать модификаторы блюд; для этого у модификаторов должно быть включено пользовательское свойство ArrivalsMod — это настраивает партнёр.

Сохраните контрол и переходите к теме.

Шаг 2. Темы: разметка экрана

Тема — это то, что гость видит на экране целиком. В списке тем показываются название, разрешение и предпросмотр. Как и с контролами, преднастроенную тему iiko можно скопировать и доработать: нажмите кнопку копирования напротив неё, внесите изменения, переименуйте и сохраните.

Чтобы создать тему с нуля, нажмите «Добавить», введите имя и выберите разрешение — по умолчанию 1024×768 пикселей, свой размер добавляется в списке. В панели управления включите «Границы» и «Привязку» — с ними проще расставлять объекты относительно друг друга. Затем выберите режим темы:

• Экран заказа — основной режим, показывается, пока хотя бы в одной области есть заказ.
• Режим ожидания — включается, когда заказов нет ни в одной области темы. Сюда обычно ставят рекламу или меню.

В одной теме настраивается оформление для разных режимов, можно добавить и свой режим.

Элементы темы

• Область — статичная область произвольного размера, в которую добавляется контрол. В одну область помещается один контрол; если на экране нужно несколько контролов, для каждого создаётся своя область. Для области выбираются типы статусов, статусы, источники и типы заказов — так на одном экране можно показывать, например, только самовывоз, а на другом только доставку.

У области два режима показа заказов.

• Лист. При смене статуса меняется оформление контрола, а готовые заказы перемещаются вверх или вниз списка — по настройке «Расположение контролов». Например, заказ №3 появился в середине списка, а когда стал «Готово», автоматически поднялся наверх. Параметр «Указать максимальное количество столбцов» задаёт, сколько колонок заказов умещается в области: когда первая заполнена, рядом создаётся следующая, а ширина колонок подстраивается под область.
• Динамически заполняемая область. Новый заказ добавляется рядом с предыдущим и при смене статуса остаётся на месте — меняется только внешний вид, например цвет фона.

Чтобы заказы визуально не сливались, задайте межстрочный и межстолбцовый интервалы и включите построчное чередование цветов: заказы будут выделяться двумя цветами через один, цвета и цвет первой строки выбираются произвольно.

• Всплывающее окно — появляется поверх остальной информации на заданное время, чаще всего чтобы объявить о готовом заказе. Окно служит подложкой для контрола, области, текста или изображения. В тему добавляется только одно всплывающее окно. Для него задаются тип статуса и статус заказа, при переходе в который окно появится, — например, «Статусы кухни» и «Приготовлено». Если включить «Проигрывать сигнал при изменении», окно сопровождается звуком.
• Рекламный блок — область для рекламной кампании. В одном блоке показывается один материал, в теме — один рекламный блок. Сами кампании настраиваются в разделе «Экраны и звуки» → «Кампании».
• Текст, изображение, прямоугольник — для оформления: подписи, логотип, фон, цветные плашки.
• Текущее время — системное время устройства, на котором работает экран.
• Счётчик — показывает одно значение, которое получает по внешнему REST API: например, сколько блюд заказано сегодня или сколько гостей в зале, если эти цифры где-то фиксируются. Задаются адрес, метод GET или POST, заголовки, таймаут, тип авторизации и частота опроса — не чаще раза в 300 секунд. Счётчик запоминает последнее значение: если интернет на кассе пропадёт, на экране останутся прошлые данные, а не пустое место.

Как добавить контрол в тему и отредактировать элементы

Контрол добавляется только через область или всплывающее окно: откройте настройки элемента, нажмите «Выбрать контрол» и кликните нужный в списке. Чтобы отредактировать любой элемент темы, дважды кликните по нему в рабочей области или нажмите на его имя в списке — у элемента появится зелёная пунктирная рамка, а в боковом меню откроются макет, границы, шрифт и выравнивание.

Часть настроек дублируется в контроле и в теме: отображение номера заказа, время ожидания, имя клиента, имя курьера. Если параметр задан и там и там, на экране работает значение из темы.

Шаг 3. Настройка терминалов

Раздел «Настройка терминалов» показывает рестораны и кассы, на которых установлен плагин. Если в блоке ресторана пусто, плагин не установлен ни на одной кассе. Для каждой кассы из выпадающих списков выбираются тема, кампания для рекламных роликов и настройки отображения заказов, затем нажимается «Сохранить». Блок «Привязка по умолчанию» задаёт параметры для касс, у которых поля ещё не заполнены.

Один терминал может обслуживать несколько разных экранов — это режим мультиэкранности. Например, один экран показывает только заказы на доставку, а другой — заказы для столов в зале. При подключении устройства по адресу кассы браузер предложит выбрать, какой из экранов показывать.

Системные настройки: одна тема, разные экраны

Системные настройки позволяют переопределить для конкретного экрана параметры, которые заданы в контроле. Пример из практики: тема одна на два экрана, но на первом нужно скрыть столы 1–5, а на втором показать. В контроле у элемента «Номер стола» выбирается «Скрыть столы» с номерами 1–5, в разделе настроек создаётся системная настройка «Показывать столы» с нужными номерами, и она назначается только второму экрану. Системные настройки приоритетнее настроек контрола, поэтому одна тема на разных экранах выглядит по-разному.

Чтобы создать настройку, нажмите «Системные настройки» → «Добавить настройки», задайте название и заполните блоки:

• Настройки заказов — типы и источники заказов; свои источники добавляются кнопкой «Добавить источник».
• Общие — интервал и время показа всплывающих окон, сортировка заказов от старых к новым или наоборот.
• Настройки клиентских столов — какие столы отображать или скрывать.
• Формат отображения даты и времени — время приготовления, ожидания и доставки заказа.
• Тип отображения имени клиента — имя из системы или общее наименование для всех, например «Гость».

Одну настройку можно использовать для всех экранов или создать свою для каждого. После сохранения выбранная тема появится на экране электронной очереди. Если изображение не совпадает с ориентацией монитора, поверните его в кассовом приложении: «Дополнения» → «Дисплей Arrivals» → «Повернуть на 90 градусов».

Звук: чтобы готовый заказ заметили

Всплывающее окно с сигналом озвучивает готовность заказа. Чтобы звук воспроизводился, разрешите его в браузере, в котором открыт экран: нажмите на значок рядом с адресной строкой и включите параметр Sound. Системный сигнал можно заменить своим: при выключенной кассе положите файл sound.mp3 с тем же именем в папку плагина Resto.Front.Api.Arrivals (wwwroot → assets → audio), запустите кассу и очистите кэш браузера на экране.

Для звуковых уведомлений персоналу на самой кассе — новый заказ, заказ упакован и готов для курьера, бронь стола — в веб-офисе есть отдельное приложение «Звуки» с плагином DigitalVoice. Оно настраивается независимо от электронной очереди.

Реклама на табло

Пока заказов нет или рядом с очередью заказов табло может показывать акции и меню. Материалы загружаются в галерею веб-офиса — изображения и видео в кодеке H.264, по одному файлу до 100 МБ — и собираются в кампании: название, период и время показа, дни недели, разрешение, набор файлов с длительностью показа каждого. Кампания привязывается к кассе в настройке терминалов, а место под неё размечается в теме рекламным блоком. Если периоды кампаний пересекаются, их материалы показываются по очереди.

Сценарии использования

• Фастфуд и фудкорт. Табло у выдачи с двумя областями: «Готовится» и «Готово», всплывающее окно со звуком при готовности, номера заказов крупно. В режиме ожидания — меню и акции.
• Доставка и самовывоз. Экран для курьеров и сборщиков: статусы доставки, имя назначенного курьера, время ожидания. Через фильтр источников заказов на табло попадают только заказы агрегаторов и сайта.
• Ресторан с залом и самовывозом. На табло для гостей показываются только заказы с собой — столы, которые обслуживают официанты, скрыты через настройку «Номер стола».
• Сеть. Одна тема для всех ресторанов, а различия — источники заказов, формат времени, видимые столы — задаются системными настройками для каждого экрана.
• Заведение без кухонных заказов. Режим работы без кухни: заказ показывается как «Готовится» после печати пречека и как «Приготовлен» после оплаты.

Табло за один вечер

Электронная очередь iiko превращает любой экран с браузером в табло готовности заказов. Гости видят, на какой стадии их заказ, и не отвлекают персонал вопросами; курьеры и сборщики понимают, что забирать следующим; управляющий настраивает всё из веб-офиса и меняет оформление, не трогая кассу.

Для старта нужны плагин на кассе, разрешение в Cloud API и три шага в веб-офисе: контролы, тема, терминалы. Готовые контролы и темы iiko позволяют запустить первое табло за один вечер, а дальше дорабатывать его под свой формат: фильтры заказов, всплывающие окна, звук, реклама и несколько экранов на одном терминале.

Экран, плагин Arrivals, контролы, темы и системные настройки под ваш формат обслуживания — всё это ставим и настраиваем мы; напишите, с какого табло хотите начать.