Контент по тегу

Как я сделал на Flutter игру для разработчиков. Часть 2

Статьи android mobile iOS Fun
Всем привет! Меня зовут Амир Утеуов, я ML-инженер из Авито.
В первой части статьи я поделился тем, что пришлось сделать и учесть для создания собственной игры для разработчиков — DevRush. Суть игры заключается в том, что нужно на время находить иконки языков программирования. Я прошёл путь от создания геймплея и векторной анимации до сборки под Android и iOS. Главная неожиданность ждала в App Store — модераторы отклонили игру из-за иконки Android, посчитав это рекламой конкурента. Но по итогу Авито взял мою игру на стенд Code Fest 2025.
В этой части будет о том, как создавался редизайн и что нужно было доработать, чтобы игру можно было использовать на стенде Авито.

В этой статье:

  1. Новый дизайн
  2. Вайбкодинг
  3. Конференция CodeFest 2025
  4. Выводы
  5. Благодарности
  6. Что ещё посмотреть по теме

Новый дизайн

Таков был мой новый флоу работы:
Для того, чтобы игра стала еще лучше, коллега Вика Максимчук нашла дизайнеров из Авито, которые разработали новый красивый дизайн. Отдельное спасибо коллегам за помощь и поддержку!

Слева — старый дизайн, справа — новый

Во Flutter у каждого компонента/виджета мы можем задавать параметры Style и создавать общую тему приложения Theme. В проекте у меня была общая тема приложения и кастомные классы для компонентов кнопки, input, ячейки для отображения лого и так далее. В приложении использовались стандартные Material3 компоненты. Стили хранились в отдельном классе/файле с переменными, поэтому изменения кода были в основном там. Но, конечно, чем раньше вы будете иметь ваш финальный дизайн, тем меньше придется переделывать в дальнейшем. В процессе редизайна получилось легко перенести 90% изменений, но некоторые остались в to-do.

Вайбкодинг

Для конференции был придуман такой вариант использования игры: участники подходят и регистрируются у ребят на стойке, получая уникальный ID. По этому ID они играют на планшете, с которого данные отправляются на Web-приложение, где хранятся все успешные попытки. Каждые 3 часа мы подводили итоги «раунда» и награждали лидера рейтинга. Такая схема позволила не собирать и не хранить персональные данные участников в стороннем приложении, которое в теории можно взломать.
Для разработки лидерборда я попробовал vibecoding: попросил LLM написать backend с тремя ручками (ручка — это endpoint, по которому выполняется определенная бизнес-логика). Далее я отправил скрины приложения и попросил написать frontend в том же стиле. Интересно, что ИИ по скрину попытался реализовать всю логику работы приложения.
После нескольких уточнений из разряда: «Используй только цвета и стили из изображения» — дизайн получился неплохим. Цвета были перенесены 1-в-1, но JS-код вышел не так хорошо, чтобы сразу использовать. В случае endpoint в API из-за нейросетей в блоке появился лишний код.
Сделать асинхронной подгрузку ответов пришлось самому, выпилив половину сгенерированного кода. В любом случае результат мне понравился.
Я остановился на варианте Docker + Flask Python Web-приложение + SQLite для сохранения ответов. Ответами были:
  • Timestamp;
  • User ID;
  • Score — время ответа (чем меньше, тем лучше).
Я развернул у себя на сайте это простое веб-приложение для сбора статистики и настроил роутинг запросов в nginx в этот контейнер. Не забыл проверить, что все везде доходит, поскольку могла возникнуть проблема с CORS.
В мобильном приложении обернул в try/catch отправку запросов на случай, если нет интернета или сервис недоступен.

Web-лидерборд игры

Конференция CodeFest 2025

На CodeFest 2025 меня позвали коллеги, предложив поиграть в DevRush на стенде Авито. Конференция проходила в Новосибирске, на ней было около 2000 человек, много лекций и стендов разных компаний. На нашем стенде за 2 дня в игру поиграли около 200 человек.

Участники CodeFest 2025 играют в DevRush

У нас было 2 iPad с установленной игрой в режиме «Debug», все желающие подходили и проходили сначала режим обучения — первый уровень «Junior». Затем режим контест, где нужно было пройти игру на полном поле. В конце мы дарили носочки и брелоки-ремувки.

Среди участников были действительно быстрые геймеры, которые буквально с первых попыток проходили поле за 8 секунд. В первый день таких была пара человек, во второй день участники уже адаптировались и стало гораздо больше топ-перформеров.

За два дня лучшим результатом стал 6,42 секунды в режиме контеста! Нужно было найти 8 языков программирования на поле из 16 клеток. Это сильно.

В целом топ лидерборда выглядел всегда достаточно плотным. Игроки, конечно, удивляли.

Таблица рекордов

Было 3 человека из 200, которые сами выбрали режимы «Big Data Frameworks» и отвечали на них. Только один участникпрошел все режимы игры с первой попытки и получил мерч за ProgLang, OS, Big Data.
Диалог у стойки:

– О, у вас хорошо получается, вы, видимо, интересуетесь языками программирования!

Участник указывает на бейджик: “Тимлид из большой компании”

– А, тогда понятно.
Кто-то хотел соревноваться с другом в режиме контеста на одном поле. Кто-то подглядывал за ответами друзей, но даже совместными усилиями не удавалось легко пройти поле. Были, конечно, и участники, которым игра не заходила: кто-то пытался, но не мог распознать все нужные иконки, кому-то просто не понравилась сама игра. Но таких было немного — примерно 1%.

После каждого дня было удивительно видеть статистику по количеству пройденных уровней: на каждом планшете было по 4000 уровней.
В конце первого дня конференции было пройдено 4448 игровых уровней на первом планшете и 3955 на втором!

Выводы

  1. Изменения игры для использования на конференции, адаптация под iPad и добавление Web-лидерборда оказались существенными. Эти оптимизации заняли меньше времени, чем я думал, но тоже заняло некоторое время.
  2. Здорово, когда ты можешь видеть, как люди играют в твою игру и радуются прогрессу. Это очень мотивирует!
  3. Только после реальной раскатки на пользователей можно заметить баги в игре. Например, первый же пользователей просрочил таймер и игра зависла из-за бага. В то время как я всегда тестировал накликивая все иконки.
  4. Вайбкодинг изолированных частей приложения помогает в разработке. Так я разработал отдельную часть Web-приложения с лидербордом.
  5. Поддержка коллег бесценна, среди них вы можете найти единомышленников.
  6. Лучше с самого начала подумать о дизайне, чтобы потом не пришлось переделывать. В идеале найти дизайнера в команду.
  7. Людям всех возрастов и грейдов нравится играть в профильные игры на IT-конференциях. Я видел много благодарных участников — ради этого стоит разрабатывать свои пет-проекты.

Благодарности

Хочу выразить благодарность своим коллегам Виктории Максимчук и Максиму Хоровинкину за идею поехать на конфу с игрой и проработку организации на стенде. Также отдельное большое спасибо коллегам дизайнерам за помощь с редизайном игры. Спасибо коллегам-редакторам за помощь с редактированием и публикацией статьи. Спасибо сообществу Coffee & Code, на их завтраках всегда можно посоветоваться по своим пет-проектам, и ребята всегда дают годные советы.

Что ещё посмотреть по теме