Умный фуд‑вендинг: от железа до оплаты

[MarkT]

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

1. Концепция

Мы делаем смарт-холодильник формата «фуд-вендинг»: по сути, это обычный холодильник с прозрачной дверью, но с умной начинкой и тесной интеграцией с веб‑интерфейсом.

Идея — дать возможность сотрудникам или посетителям брать еду 24/7, оплачивая её через удобный интерфейс, а наполнение и остатки контролировать из админки.

Основные принципы:

• фронтальная фотография холодильника с реальными полками, разбитая на сетку «слотов» под каждую позицию;

• привязка слотов к реальным координатам полок (в пикселях, от верха изображения), с преобразованием в проценты для адаптивной вёрстки;

• каждый слот — это «ячейка» с товаром из базы данных (название, цена, остаток, штрихкод и т.п.);

• клик по слоту открывает карточку товара или сразу добавляет его в корзину.

В итоге пользователь видит не типичный список, а «живой» холодильник на экране, где можно визуально выбрать конкретный продукт.

2. Способы реализации

Фронтенд (витрина)

Базовая разметка: обычный

Код: Выделить всё

<div class="fridge">

с фоном в виде фото холодильника и вложенными

Код: Выделить всё

<div class="slot" data-cell="A1">

для слотов.

Позиционирование слотов: координаты считаются в процентах от ширины/высоты картинки, исходно задаются в пикселях от верхнего края, плюс высота полки и рабочая зона.

Для удобства мы делаем привязку «от верха» — так проще сверяться с макетом и править значения.

Сетка условно делится на ячейки (например, A1–E4), где:

• буква — колонка по горизонтали;

• цифра — ряд по вертикали.

Каждая ячейка может быть:

• активной (есть товар, клик по ней открывает карточку);

• неактивной/пустой (нет товара или позиция временно отключена).

Код: Выделить всё

<div class="fridge">
<div class="slot" data-cell="A1"></div>
<div class="slot" data-cell="A2"></div>
...
</div>

Дальше слоты связываются с товарами по идентификатору или по координатам.

Бэкенд

• Хранение товаров и остатков — любая привычная база (MySQL/MariaDB), привязка к слотам происходит через отдельную таблицу (slot_id → product_id, qty и т.п.).

• Планируется учёт продаж, выгрузка отчётов, простая интеграция с CRM/учётной системой (через API или webhooks).

• Управление содержимым холодильника — через админку: перетаскивание товаров по слотам, смена фото, временное отключение позиций.

При желании можно добавить:

• авторизацию (например, по корпоративным картам/телеграм‑боту);

• разные режимы оплаты (онлайн‑оплата, списание с депозита, бонусная программа);

• интеграцию с внешними смарт‑замками и датчиками открытия двери.

3. Текущая стадия проекта

Сейчас мы:

• определились с общей концепцией: смарт-холодильник как альтернатива классическому вендингу, но с упором на визуальное представление витрины и веб‑интерфейс;

• выбрали подход к разметке: привязка размеров полок и рабочих зон от верхнего края изображения, пересчёт в проценты и разбиение на логические слоты;

• подготовили базовую HTML‑структуру для «фронта» и схему БД для привязки слотов к товарам.

Ближайшие шаги:

• получить финальные размеры полок в пикселях и утвердить сетку слотов по реальному фото холодильника;

• допилить адаптивную вёрстку, чтобы макет корректно смотрелся на разных разрешениях;

• реализовать связь: слот → товар → заказ → учёт списаний;

[MarkT]

Краткая схема работы холодильника:

1. Открытие холодильника по кнопке
Сценарий:

• Человек сканирует QR на двери, попадает на stolovka.pro/fridge/{id}.

• На странице есть кнопка «Открыть холодильник».

• По нажатию фронт делает запрос на твой бекенд (POST /api/fridge/{id}/open).

• Бекенд отправляет SMS‑команду, HTTP‑запрос или MQTT‑команду на контроллер холодильника, который уже физически открывает замок.

Тут нет проблем с браузером: он просто дергает API, а дальше всё зависит от того, как реализован «сервер → контроллер холодильника» (GSM‑модем, отдельный LTE‑роутер, MQTT через интернет и т.п.).

Важно:

Нужна авторизация/сессия, чтобы не открыть холодильник каждому, кто увидел ссылку (одноразовые токены, срок жизни сессии, привязка к конкретному холодильнику).
Желательно, чтобы контроллер возвращал статус (открылось/нет), чтобы на фронте подсветить результат.

2. Сканирование товара через камеру браузера:

• доступ к камере через navigator.mediaDevices.getUserMedia (HTML5);

• декодирование штрихкодов/QR непосредственно в JS (через WebAssembly или чистый JS);

• это работает прямо в мобильном браузере без отдельного приложения.

Есть два подхода:

• Использовать готовую библиотеку (html5-qrcode, Scanbot Web SDK, Dynamsoft и т.п.).

• Использовать стандартный BarcodeDetector в поддерживаемых браузерах (Chrome/Android и часть современных браузеров).

[/list]

Пример логики:

Пользователь жмёт «Сканировать товар».
Скрипт запрашивает доступ к камере (желательно facingMode: "environment" для задней камеры).

На странице показывается превью с камеры и идёт постоянное сканирование; при успешном чтении штрихкода ты вызываешь свой API POST /api/fridge/{id}/scan, получаешь товар и добавляешь его в корзину.

Ограничения:
iOS Safari капризный, но последние версии нормально работают с getUserMedia; всё равно нужно тестировать.
Для некоторых библиотек нужен HTTPS (и он у тебя всё равно будет).
Распознавание сильно зависит от качества камеры, освещения и размера штрихкода.

3. Работа камеры «внутри сайта и парсится сайтом»
Твоё требование:

• камера работает внутри браузера, внутри сайта и парсится сайтом.

Это ровно то, что делают HTML5‑сканеры: видеопоток остаётся в браузере, JS‑код декодирует баркод локально, и на сервер ты уже отправляется только строка штрихкода.

Технически это выглядит так:

• <video> показывает поток с камеры;

• библиотека каждые X миллисекунд берёт кадр из видео и прогоняет через декодер (WASM/JS);
  при успешном декодировании вызывает твой callback, где ты дергаешь сервер и обновляешь корзину.

То есть с точки зрения безопасности/приватности всё ок: картинка с камеры никуда автоматически не утекает, пока ты сам не начнёшь её отсылать.

4. Жизнеспособность всей цепочки
Общая цепочка:

• QR → страница холодильника.

• Кнопка «Открыть холодильник» → API → замок.

• Пользователь достаёт товар.

• Кнопка «Сканировать товар» → камера в браузере → скан штрихкода → товар падает в корзину.

• Оплата/фиксация/списание.

Всё это:

• технически реализуемо стандартными веб‑технологиями (HTML5, JS, Web APIs + твой бекенд);

• не требует установки приложения;

• хорошо ложится на существующую инфраструктуру

[MarkT]

Приехали "мозги" для холодильника
1. GSM блок "Модуль GSM на плате с разъемом MicroSIM Uвх-3.3-5В" фото ниже
2. "Ардуино нано мини с кабелем", фото ниже

На базе второго нашего сервера собран GSM шлюз, о котором расскажем позднее здесь в отдельной теме. Вкратце:

• телефон на андроиде с установленным из гитхаба приложением SMSGate.

• сервер на базе линухи, который выполняет функции эндпоинта (точки входа на шлюз), формирования пакетов SMS, поставку их в очередь и отправку на телефон внутри локальной сети.

Идея:
После сканирования штрих кода на холодильнике, сайт идентифицирует его по ID зашитым в код после чего формирует команду управления, например {hopen 52032}.

Экспериментально было выявлено то, что оператор-отправитель СМС и есть подозрение, что получатель блокируют отправление/получение SMS сообщений с текстом внутри похожим на содержание ссылки (:_!/\ и т.д.). Так же номер нужно "разогревать"

SMS команда через шлюз передается на GSM модуль холодильника. Ардуино распознает данную команду и подает импульс на открытие холодильника через транзистор или реле. На брелок или на исполнительный элемент - посмотрим, как будет надежнее.

Плюсы данной схемы открытия холодильника в безотказности: SMS придет всегда
Минусы - задержка секунд в 6-8 после нажатия на кнопку "открыть". Это обусловлено каналом GSM

[MarkT]

Погнали, в общем...
15:06 19.04.2026
- создаем каталог "СМАРТ ХОЛОДИЛЬНИК" на сайте
- создаем категорию внутри SMARTHOL 52001 (в дальнейшем идентификатор ( ID = sh52001)
- создаем каталог с подкаталогами в в саби престо для выгрузки на сайт и забиваем в него тестовые товары

• плагин выгрузки самописный, фото вебморды каталога в аттаче

Престо обладает особенностью такой, что нигде нельзя посмотреть айди прайса из которого "выцеплять" товары на сайт.

- через postman производим запрос на получение айди прайса:
Ответ:

Код: Выделить всё

{
    "priceLists": [
        {
            "id": 159,
            "name": "SMARTHOL 52001"
        },
        {
            "id": 36,
            "name": "БАРНОЕ МЕНЮ"
        },
        {
            "id": 157,
            "name": "ДЛЯ САЙТА / ДИНАМИЧ."
        },
        {
            "id": 158,
            "name": "ДЛЯ САЙТА / КОМПЛЕКСЫ"
        },
        {
            "id": 7,
            "name": "СТОЛОВАЯ"
        }
    ],
    "outcome": {
        "hasMore": false
    }
}

Наш прайс: "id": 159
- сопоставляем каталоги
- производим выгрузку на сайт

[MarkT]

Выгрузка на сайт произведена.
Но надо проверить на конфликт пересекающихся товаров с 1 артикулом. С другой стороны им вокомерс присваивает свой уникальный айди. А выборки по артикулу вроде нигде пока нет. Раньше было через телеграм чат бот, но в связи с ограничениями - он был выключен.
Каталог доступен по ссылке: https://stolovka.pro/product-category/s ... /sh_52001/ но это не то, что надо для холодильника.
Для него надо создать свою страничку и именно на нее будет заходить клиент по QR коду.

[MarkT]

Страничка создана. Шаблон уже есть. Поэтому заморачиваться с прорисовкой не нужно.
https://stolovka.pro/sh52001/
На текущий момент мы представили, что клиент перешел по QR коду на данную страничку.
Что нужно будет сделать:
- адаптировать страничку под мобильное устройство.
- добавить кнопку открыть холодильник

• временно на кнопку "открыть холодильник" поставить заглушку. GSM шлюз физически уже работает и рассылает сообщения клиентам. Отается только связать их. Но это после установки мозгов на холодильник

- добавить кнопку начать сканирование

• логика после нажатия на сканирование:
  - включение камеры
  - скан штрих кода
  - распознавание (сопоставление) с тем, что в холодильнике (меню холодильника)
  - добавление товара в корзину
  - диалог "сканировать еще"/"в корзину"
  - настроить функционал корзины
  - оплата существующим способом (онлайн)