Как мини-игра из TikTok помогла нам решить производственную задачу и выиграть хакатон от «Магнита»
Всем привет! Меня зовут Илья, работаю UX/UI-дизайнером, учусь в МИСиС. Сегодня хотелось бы рассказать о довольно интересном кейсе, который нам вместе с командой удалось решить благодаря идее, абсолютно случайно подхваченной из «ТикТока». Но, давайте по порядку.
Предисловие
На минувших выходных проходил Magnetic Code Hackathon (онлайн хакатон от Магнита). Наша команда принимала участие в 4 треке "Приложение для оптимальной упаковки и визуализации размещения товара на палете".
Описание кейса
Необходимо было решить задачу упаковки определенного количества коробок товара в тару так, чтобы объем тары использовался оптимально, т. е. товары лежали бы наиболее плотно. Цель — определить вариант с минимальной высотой всех скомплектованных коробок в таре. В результате расчета должна быть получена визуализация рассчитанного порядка расположения товара. На выходе необходима схема размещения коробок в таре, где каждая коробка имеет свое положение (с учетом возможных вращений) и порядковый номер загрузки в тару
Говоря простым языком, от нас требовалось создать мобильное приложение с удобным интерфейсом, которое поможет сотрудникам Магнита, работающим на складе, быстро получить лучший вариант размещения коробок с товаром на палете, так как на текущий момент этот фактор зависит только от опыта сортировщика.
Алгоритму на вход подается json-файл (поступает от WMS), а сам алгоритм нужно разместить на среднем слое, интерфейс взаимодействия с пользователем — в приложении.
Команда
Для реализации проекта мы собрали довольно опытную команду из студентов МИСиСа и Иннополиса, состоящих в клубе хакатонщиков ITAM, и уже неоднократно создававших цифровые продукты как для института, так и для сторонних компаний. Трое backend разработчиков на Java отвечали за разработку алгоритма, налаживание процесса сортировки и проработку системы парсинга json файла, приходящего от WMS. Frontend на Flutter занимался организацией отображения данных с бэкенда, а также творил чудеса с различными вариантами визуализации размещения коробок на палете (а за время хакатона у нас возникло целых 3 варианта отображения итогового результата, о чём расскажем чуть позже). Ну и автор поста корпел над проработкой удобного интерфейса, а также презентацией на питч проекта. В результате мы должны были получить кроссплатформенное мобильное приложение.
Таймлайн хакатона
Соревнование длилось 4 дня, во время которых мы в сумме поспали часов 7. Отдельно хотелось бы поблагодарить организаторов за пару промокодов на 500 рублей в "Яндекс.Еда", они хорошо поддержали наш рабочий настрой.
Алгоритм
Я рискнул предположить, что сложное техническое описание вряд ли встретит положительный отлик на данном ресурсе , поэтому постарался описать принцип работы алгоритмической части нашего проекта как можно более идейно.
Весь первый день хакатона мы провели в утомительном поиске как уже готовых алгоритмов, решающих данную задачу, так и просто статей, хоть как-то способных помочь найти решение. Вот наиболее интересные ресурсы по теме, которые нам удалось найти:
В итоге мы пришли к следующему элегантному решению: выбор алгоритма происходит динамически на основе загруженных данных, что позволяет компенсировать недостатки отдельно взятого алгоритма и всегда находить оптимальный вариант упаковки.
Brute Force
Алгоритм полного перебора, генерирующий идеальное решение, но занимающий слишком много времени.
LVFF
Итеративный поиск самого объёмного объекта и установка в любое возможное место.
LAFF
Эвристический алгоритм, основанный на идее упаковки объектов с большой площадью в первую очередь.
Визуализация
А теперь перейдём к самой интересной части проекта. Как я уже упоминал ранее, за время хакатона у нас возникло целых 3 идеи того, как можно отобразить результат работы нашего алгоритма.
Полноценная 3D модель
Первой идеей было с��здать полноценную 3D модель получившегося расположения коробок на палете. Выглядеть это должно было примерно следующим образом
Однако при проработке данного варианта мы столкнулись с тем, что приложение невероятно сильно тормозило и довольно долго прогружало модельки. А для нас на первом мере стояла именно скорость работы, и то, насколько решение будет прикладным. Поэтому мы решили искать другие варианты.
Проекции
Второй идеей, которая пришла к нам в голову, стало создание четырёх проекций палеты, заполненной коробками. Выглядеть это должно было примерно следующим образом.
Данный вариант работал довольно быстро, однако ни о каком удобстве не могло идти и речи, так как в постоянно свайпать три проекции туда-сюда довольно противно, да и сложно для понимания.
Изометрия
И вот, когда мы оказалась в идейном тупике, было принято решение выделить пару часов времени на отдых. Как раз в это время младшая сестра одного из участников команды смотрела TikTok, и коллега, бросив взгляд на видеоряд, мелькавший на экране смартфона, с криками "Эврика", побежал рассказывать внезапно возникшую идею в дискорде своей, уже было отчаявшейся, команде.
Конечно! А почему бы не применить "ложное" 3D - изометрию? Таким образом, мы одновременно и сделаем визуализацию более понятной, и сохраним скорость работы приложения.
Итоговое решение
В результате у нас получился следующий концепт мобильного кроссплатформенного приложения.
Как видите, сотруднику будет легко увидеть необходимое расположение коробок, а пошаговый прогресс всегда позволяет вернуться назад и уточнить непонятные моменты. Так как в ТЗ допускалась возможность вращения коробок, то для определения стороны мы создали отдельную текстурку в виде линии разреза, которая обозначает верх. Также для большего удобства мы выводим название, габариты и тип товара, который в текущий момент "падает" на палету.
Особенно нас порадовала скорость работы алгоритма. Файл json, содержащий информацию о 56 коробках с товарами, он обработал всего за 3 секунды.
Питч
А здесь можете посмотреть, как мы презентовали наше решение перед членами жюри - сотрудниками Магнита и Яндекса. Если вас больше интересует именно техническая часть проекта, то лучше заглянуть сюда :)