Всем привет! Меня зовут Амир Утеуов, я ML-инженер из Авито.
В первой части статьи я поделился тем, что пришлось сделать и учесть для создания собственной игры для разработчиков — DevRush. Суть игры заключается в том, что нужно на время находить иконки языков программирования. Я прошёл путь от создания геймплея и векторной анимации до сборки под Android и iOS. Главная неожиданность ждала в App Store — модераторы отклонили игру из-за иконки Android, посчитав это рекламой конкурента. Но по итогу Авито взял мою игру на стенд Code Fest 2025.
В этой части будет о том, как создавался редизайн и что нужно было доработать, чтобы игру можно было использовать на стенде Авито.
В этой статье:
Новый дизайн
Вайбкодинг лидерборда
Конференция CodeFest 2025
Что ещё посмотреть по теме
Новый дизайн
Таков был мой новый флоу работы:
Для того, чтобы игра стала еще лучше, коллега Вика Максимчук нашла дизайнеров из Авито, которые разработали новый красивый дизайн. Отдельное спасибо коллегам за помощь и поддержку!
Во Flutter у каждого компонента/виджета мы можем задавать параметры Style и создавать общую тему приложения Theme. В проекте у меня была общая тема приложения и кастомные классы для компонентов кнопки, input, ячейки для отображения лого и так далее. В приложении использовались стандартные Material3 компоненты. Стили хранились в отдельном классе/файле с переменными, поэтому изменения кода были в основном там. Но, конечно, чем раньше вы будете иметь ваш финальный дизайн, тем меньше придется переделывать в дальнейшем.
В процессе редизайна получилось легко перенести 90% изменений, но некоторые остались в to-do. Например, я не стал полностью заменять иконки, только изменил их стиль, фоновый хэдер для простоты сделал из 2х компонентов, форму виджета для режима день/ночь сохранил круглой.
Вайбкодинг лидерборда
Для конференции был придуман такой вариант использования игры: участники подходят и регистрируются у ребят на стойке, получая уникальный ID. По этому ID они играют на планшете (заполняя поле web ID), с которого данные отправляются на Web-приложение, где хранятся все успешные попытки. Каждые 3 часа мы подводили итоги «раунда» и награждали лидера рейтинга. Такая схема позволила не собирать и не хранить персональные данные участников в стороннем приложении, которое в теории можно взломать.
Для разработки лидерборда я попробовал vibecoding: попросил LLM написать backend с тремя ручками (ручка — это endpoint, по которому выполняется определенная бизнес-логика). Далее я отправил скрины приложения и попросил написать frontend в том же стиле. Интересно, что ИИ по скрину попытался реализовать всю логику работы приложения.
После нескольких уточнений из разряда: «Используй только цвета и стили из изображения» — дизайн получился неплохим. Цвета были перенесены 1-в-1, но JS-код вышел не так хорошо, чтобы сразу использовать. В случае endpoint в API из-за нейросетей в блоке появился лишний код.
Сделать асинхронной подгрузку ответов пришлось самому, выпилив половину сгенерированного JS кода. В любом случае результат мне понравился.
Я остановился на варианте Docker + Flask Python Web-приложение + SQLite для сохранения ответов. Ответами были:
Timestamp;
User ID;
Score — время ответа (чем меньше, тем лучше).
Я развернул у себя на сайте это простое веб-приложение для сбора статистики и настроил роутинг запросов в nginx в этот контейнер. Не забыл проверить, что все везде доходит, поскольку могла возникнуть проблема с CORS.
В мобильном приложении обернул в try/catch отправку запросов на случай, если нет интернета или сервис недоступен.
Чтобы не хардкодить ссылку на веб API в мобильном приложении, я добавил возможность ввести её из "секретного" меню. Таким образом можно было настроить актуальную ссылку на лидерборд или даже лидерборды без правки кода и перезаливки в debug версии и тем более релиз версии в сторах.
Конференция CodeFest 2025
На CodeFest 2025 меня позвали коллеги, предложив поиграть в DevRush на стенде Авито. Конференция проходила в Новосибирске, на ней было около 2000 человек, много лекций и стендов разных компаний. На нашем стенде за 2 дня в игру поиграли около 200 человек.
У нас было 2 iPad с установленной игрой в режиме «Debug», все желающие подходили и проходили сначала режим обучения — первый уровень «Junior». Затем режим контест, где нужно было пройти игру на полном поле. В конце мы дарили носочки и брелоки-ремувки.
Среди участников были действительно быстрые геймеры, которые буквально с первых попыток проходили поле за 8 секунд. В первый день таких была пара человек, во второй день участники уже адаптировались и стало гораздо больше топ-перформеров.
За два дня лучшим результатом стал 6,42 секунды в режиме контеста! Нужно было найти 8 языков программирования на поле из 16 клеток. Это сильно.
В целом топ лидерборда выглядел всегда достаточно плотным. Игроки, конечно, удивляли.
Было 3 человека из 200, которые сами выбрали режимы «Big Data Frameworks» и отвечали на них. Только один участникпрошел все режимы игры с первой попытки и получил мерч за ProgLang, OS, Big Data.
Диалог у стойки:
– О, у вас хорошо получается, вы, видимо, интересуетесь языками программирования!
Участник указывает на бейджик: “Тимлид из большой компании”
– А, тогда понятно.
Кто-то хотел соревноваться с другом в режиме контеста на одном поле. Кто-то подглядывал за ответами друзей, но даже совместными усилиями не удавалось легко пройти поле. Были, конечно, и участники, которым игра не заходила: кто-то пытался, но не мог распознать все нужные иконки, кому-то просто не понравилась сама игра. Но таких было немного — примерно 1%.
После каждого дня было удивительно видеть статистику по количеству пройденных уровней: на каждом планшете было по 4000 уровней.
В конце первого дня конференции было пройдено 4448 игровых уровней на первом планшете и 3955 на втором!
Выводы
Изменения игры для использования на конференции, адаптация под iPad и добавление Web-лидерборда оказались существенными. Эти оптимизации заняли меньше времени, чем я думал, но тоже заняло некоторое время.
Здорово, когда ты можешь видеть, как люди играют в твою игру и радуются прогрессу. Это очень мотивирует!
Только после реальной раскатки на пользователей можно заметить баги в игре. Например, первый же пользователей просрочил таймер и игра зависла из-за бага. В то время как я всегда тестировал накликивая все иконки.
Вайбкодинг изолированных частей приложения помогает в разработке. Так я разработал отдельную часть Web-приложения с лидербордом.
Поддержка коллег бесценна, среди них вы можете найти единомышленников.
Лучше с самого начала подумать о дизайне, чтобы потом не пришлось переделывать. В идеале найти дизайнера в команду.
Людям всех возрастов и грейдов нравится играть в профильные игры на IT-конференциях. Я видел много благодарных участников — ради этого стоит разрабатывать свои пет-проекты.
Благодарности
Хочу выразить благодарность своим коллегам Виктории Максимчук и Максиму Хоровинкину за идею поехать на конфу с игрой и проработку организации на стенде. Также отдельное большое спасибо коллегам дизайнерам за помощь с редизайном игры. Спасибо коллегам-редакторам за помощь с редактированием и публикацией статьи. Спасибо сообществу Coffee & Code, на их завтраках всегда можно посоветоваться по своим пет-проектам, и ребята всегда дают годные советы.
Что ещё посмотреть по теме
Игра DevRush в Google Play, AppStore — буду очень рад фидбеку!
Мой Telegram-канал про пет-проекты.
Сообщество мобильных разработчиков Coffee & Code.
