На третьем курсе мы командой студентов ФИИТ сделали платформу для проведения интеллектуальных игр в Контуре. До начала работы над проектом мы почти ничего не знали про интеллектуальные игры. Оказалось, что это целый мир со своими особенностями, шутками и мемами.
За время работы над проектом мы погрузились в этот мир, сами поиграли в корпоративной лиге ЧГК, создали свою собственную платформу и провели несколько настоящих игр.
О чем проект?
Платформа состоит из админки и интерфейса для игроков. В админке можно создавать, редактировать и проводить игры. А интерфейс для пользователя позволяет участвовать в играх: отправлять ответы, подавать апелляции и смотреть рейтинг своей команды.
Над проектом работали вчетвером. Вот мы, студенты 4-го курса ФИИТ, слева направо:
Оля Шрейн проектировала архитектуру приложения, разрабатывала бэкенд и тестировала всё, что мы наделали :)
Саша Кряжев продумывал пользовательский опыт и задизайнил дизайн.
Коля Шушарин разрабатывал бэкенд и часть фронтенда, проектировал базу данных и деплоил сервис.
Даша Вихлянцева верстала страницы по макетам и писала логику фронтенда.
Команда собралась классная. Вместе мы сделали уже несколько проектов и хорошо за это время сработались.
Почему взяли этот проект?
На ФИИТ есть такая движуха, которая называется «Проектное обучение». Люди с идеями проектов и желанием их реализовать руками студентов приходят к Ване Домашних — руководителю проектного обучения. Они заполняют паспорт проекта, в котором указывают цель, ожидание, требования. Например, так выглядел паспорт нашего будущего проекта «Своя ЧГК»:
В паспорте заказчики очень подробно расписали ожидания от продуктового результата, стек технологий, критерии приемки, и требования. Нас это приятно удивило на фоне других проектов. А в качестве возможного обучения для участников предлагалось даже сыграть в «Что? Где? Когда?» в Екатеринбурге :)
Когда пришло время выбирать проекты, мы остановились на проекте «Своя ЧГК». На это было несколько причин:
- Мы идеально подходили по составу и стеку технологий — фронтенд-разработчик, бэкенд-разработчик, тестировщик и проектировщик интерфейсов.
- Мы хотели сделать крутой и красивый веб-сервис, который будет полезен и которым сможем сами пользоваться. Делать небольшие доработки в уже реализованных проектах мы не хотели.
- Заказчица очень хорошо описала проект.
Проблематика и цели были понятны и известны заранее. Несмотря на большой объем работы проект показался нам самым понятным с точки зрения конечного результата. В большинстве проектов были какие-то задумки заказчиков. В этом проекте сразу было понимание, что нужно делать и в какой последовательности.
- А еще Оля со школы увлекается интеллектуальными играми и участвовала в чемпионатах, поэтому мы решили, что такой контекст поможет сделать проект клёвым :)
Помимо нас проект хотела разрабатывать ещё одна команда, поэтому мы постарались подробно расписать эти причины и рассказать о нас. Мы оказались убедительнее и нас взяли, ура!
Главное начать
Работа над проектом началась со стартового интенсива. Он помогает начать проект, ведь это самое сложное в любой работе. На интенсиве мы познакомились с Милой Урядниковой — заказчицей проекта. Она организует ЧГК и квизы в Контуре.
Мила рассказала нам, что сейчас для организации игр арендуют сторонние платформы, и это неудобно: каких-то функций не хватает, а какие-то, наоборот, не нужны. А ещё арендовать чужие платформы дорого, или они могут быть заняты в нужный день. Неудобно иметь такую зависимость, когда хочется провести кайфовую игру, поэтому Мила отправила заявку на создание своей платформы студентами ФИИТ.
Из технологий мы выбрали вполне стандартный стек:
— Бэкенд на Node.JS + база данных PostgreSQL
— Фронтенд на TypeScript + React
— Дизайн в Figma
— Таск-менеджер в Notion
На стартовом интенсиве мы составили примерный план работы, накидали дичь-макеты и сделали первый коммит. Было понятно, что работа предстоит большая для каждого, но это наоборот лишь добавило интереса.
Как устроили процесс
Работу мы организовали в формате двухнедельных спринтов. По итогам спринта мы созванивались всей командой вместе с Милой и обсуждали, что успели сделать, а что нет, и распределяли задачи на следующий спринт.
Такой формат показался нам удачным. Он позволял держать друг друга в контексте текущих задач и планировать доработки и новые задачи.
Задачи вели в Notion. Очень подробно фиксировали все моменты. Настолько подробно, что спустя полгода нам пришлось создавать новое пространство.
Фичи разрабатывали по стандартному жизненному циклу:
- Проектирование интерфейса
- Верстка и разработка фронтенда
- Разработка бэкенда
- Связка фронтенда и бэкенда
- Тестирование
- Обсуждение и демонстрация
Конкретный лидер у нас не появился. Невероятно, но нам удалось самоорганизоваться и работать вместе. Конечно, ярые споры и недопонимания возникали, и их приходилось решать. Но такая атмосфера кипящей работы вдохновляла.
При этом потребность в кураторе и менеджере нам закрыла заказчица проекта Мила. Она организовывала и модерировала наши созвоны по итогам спринта. Нам этого хватало для комфортной работы.
Но не обошлось и без сложностей. Во время работы нужно постоянно синхронизироваться, чтобы помогать друг другу и меньше «простаивать». Пока дизайнер проектирует прототипы, разработчики отдыхают. Зато когда разработка во всю трудится, дизайнеру бывает, что нечем заняться. Бэкенд может быть готов раньше, чем фронтенд, и бэкендеру приходится ждать. У нас такие ситуации возникали довольно часто, но они и являлись триггером, чтобы подпинывать друг друга.
Горящие дедлайны — это классика. Сначала все шло по плану, но в какой-то момент поняли, что жопа дедлайн горит, поэтому перед сессией пришлось активно потрудиться.
Как технически устроено?
Фронтенд написан на TypeScript + React. Это было требование заказчика, потому что так проще дальше поддерживать проект, ведь эти технологии очень популярны и активно используются в Контуре. А ещё в тот момент для Даши это был основной стек.
Бэкенд на фреймворке Express, с его помощью удобно создавать API приложения, задавать общие параметры веб-приложения, и добавлять middleware для обработки запросов.
Для игровой части использовали WebSocket, чтобы быстрее передавать ответы игроков в реальном времени.
Для хранения данных выбрали базу данных PostgreSQL. Взаимодействие бэкенда с базой данных организовали с помощью ORM — технологии программирования, которая связывает базы данных с концепцией ООП.
Для публикации в интернете развернули приложение на своем сервере.
Баги, пот и слёзы
Никакая разработка не проходит гладко, мы столкнулись с множеством различных проблем.
Цветной прогресс-бар
Самой проблематичной частью интерфейса с точки зрения разработки внезапно оказался прогресс-бар. Это такая цветная полоса, которая уменьшается и меняет цвет в зависимости от количества времени, оставшегося для ответа на вопрос.
Прогресс-бар работал неправильно: моргал, замирал, не вовремя менял цвет. И это оказалось критично, ведь на игре очень важно вовремя замечать все изменения таймера, чтобы успеть отправить ответ. Спустя несколько подходов к исправлению багов удалось устранить большую часть ошибок, и сейчас прогресс-бар работает правильно.
Пользовательский опыт админа
Взаимодействие админа с админкой — это вообще отдельная история. В темпе быстрой игры интерфейс админа оказался сложным и неудобным. При этом по прототипу все казалось классным, потому что в статике все красиво.
Это Мила, когда попробовала админку на реальной игре :)
После тестовых игр, мы получили обратную связь от админов и начали решать проблемы.
Например, мы изначально решили, что нумерация вопросов в каждом туре будет начинаться с единицы. Это довольно логично, ведь туры разделяют пачки вопросов. Но на реальной игре заметили, что админу было тяжело сориентироваться, потому что нумерация в печатных текстах вопросов была сквозная. Пришлось думать и вычислять номер вопроса.
Было:
Стало:
Вне зоны доступа
Еще одной внезапной и критичной проблемой стало отключение облачной платформы Heroku для бесплатной публикации своего приложения. Конечно, с некоторыми ограничениями, но для наших целей это было не важно.
Плюсом платформы была простота: даёшь ссылку на репозиторий, платформа сама всё понимает и настраивает запуск автоматически! При этом был удобный интерфейс для настройки окружения: переменные среды, базы данных. Даже настройка безопасного HTTPS не занимала времени — пару кликов и все готово!
Но Heroku ушли из России, и мы начали искать новый способ публикации. Мы решили самостоятельно развернуть приложение на виртуальном сервере, используя облачные технологии.
Пришлось, конечно, запариться — но так мы постигли азы Docker. Он нам пригодился для изоляции нашего приложения в контейнере и для легкого масштабирования вне зависимости от среды.
Вместе с этим мы изучили nginx и начали использовать его в качестве обратного прокси-сервера, который находится перед нашим приложением и пересылает клиентские запросы.
Параллельно мы думали о настройке HTTPS, чтобы подключение было безопасным. Здесь тоже пришлось все делать самим, в том числе получить SSL-сертификат и донастроить nginx.
А еще нужно было сделать красивый домен. Мы решили купить ownchgk.ru, и задеплоить свое приложение на нем.
И вот мы собрали всё это воедино, у нас все получилось, и наша ЧГК живет!
Проверка платформы на нескольких сотнях человек
Платформу использовали для нескольких игр внутри Контура.
Тусовка студентов ФИИТ
Во время разработки мы проводили несколько тестовых игр, но в качестве большого тестового прогона мы выбрали тусовку студентов ФИИТ, которая проходила в Контуре.
Это классная возможность протестировать платформу на реальной загрузке. На игру зарегистрировалось больше 25 команд, а это больше 100 человек. Мы очень переживали, что что-то пойдёт не так, поэтому после каждого вопроса выгружали файлом текущий рейтинг команд, чтобы при внезапном «падении» можно было продолжить играть без потери прогресса.
Игра прошла здорово. Большой конференц-зал, огромный экран, более 25 команд, которые одновременно пользуются нашей платформой. В конце игры мы радовались больше, чем победители, ведь наше приложение выдержало нагрузку, критичных багов не обнаружили и все остались довольны. Кайф.
Ещё по результатам игры мы собрали какое-то количество пожеланий, которые в итоге учли и доработали. В основном они были как раз про пользовательский опыт админа. Во время игры админу нужно быстро совершать много действий: запускать таймер на нужном вопросе, проверять ответы, следить за турнирной таблицей. На тестовых играх такие проблемы не возникали, потому что нагрузка меньше, темп ниже — и мы не учли эти детали до настоящей игры.
КонфУР-2022
КонфУР — это конференция управления разработки в Контуре. Одной из нерабочих активностей была игра «Что? Где? Когда?» на нашей платформе. В этот раз размах уже в разы больше — на игру зарегистрировалось аж 74 команды по 4-6 человек каждая!
Игра проходила спокойно, но вдруг на 13 вопросе все резко зависло и перестало работать. Мы сразу же подключились к расследованию и помогли админам все восстановить.
Проблема была в том, что игра проходила одновременно на нескольких площадках, поэтому на платформе создали две игры. Админы хотели смотреть ход обеих игр и открыли их в соседних вкладках браузера. Так как часть данных об игре хранится в куки-файлах, при переключении вкладок одни куки перетирали другие, и при переключении вопросов в одной игре администратор переключал их в другой.
Нам потребовалось несколько минут, чтобы разобраться с проблемой. Платформа ожила, игру продолжили, но эти минуты казались бесконечными.
Несмотря на это, после ЧГК пришло много приятной обратной связи, и мы поняли, что проект по-настоящему полезный и классный.
А можно поиграть?
Проект работает и доступен на ownchgk.ru.
Чтобы протестировать интерфейс пользователя, вы можете просто перейти по ссылке и зарегистрироваться.
А чтобы посмотреть админку, зайдите в свой зарегистрированный профиль и попробуйте демоверсию админки. Из демо-аккаунта админа вы сможете сами провести свою игру :)
А что дальше?
В будущем платформу продолжат использовать для игр внутри Контура для сотрудников, студентов или даже школьников. А планов на доработки проекта накопилось очень много:
— рефакторинг существующего кода, чтобы платформа работала быстрее и надежнее,
— доработки развертывания приложения, чтобы не возникало проблем с доступностью платформы,
— редизайн и проработка пользовательского опыта, чтобы платформа стала более удобной и красивой.
Поэтому Саша и Коля решили собрать все планы воедино и доработать наш проект в качестве своей дипломной работы. Разработка ещё идёт.
В начале проектного обучения мы думали, что возьмем этот проект на один семестр, а в итоге продолжили его разрабатывать и поддерживать. Мы увидели, что наша платформа больше, чем просто учебный проект. Это сервис, который приносит пользу и радует людей. А разработка проектов — это не только про проектирование и написание кода, а про решенную проблему и довольных пользователей.
Создавайте проекты — это кайф 🤘