ABChess Web

Денис Тимоненков

September 15, 2021

6 мин

В одном из кейсов мы уже рассказали о том, как в сотрудничестве с шахматной школой ABChess разработали одноименное мобильное приложение, обучающее шахматам. Скоро после запуска проекта в продакшн мы продолжили модифировать цифровой сервис школы и приступили к разработке нового проекта — ABChess Web.

‍

То же самое,но не совсем

Итак, нам предстояло разработать веб-сайт для шахматной школы.

Чтобы подчеркнуть, что сайт — не отдельный продукт, а составляющая целого сервиса ABChess, наши дизайнеры разработали для него UX и UI, опираясь на концепцию дизайна приложения. Так нам удалось реализовать “родной” и интуитивно понятный интерфейс как для новых пользователей сервиса, так и для старых, ещё “мобильных” пользователей.

Веб-сайт должен был также повторять функционал приложения, то есть содержать Обучающую часть, Личный кабинет и Игровой модуль.

Год назад при разработке приложения под iOS мы затратили немало времени на разработку шахматной доски, так как у нужного нам движка Stockfish не было библиотеки под Swift. При разработке веб-сайта такой проблемы не возникло — для фронтенда мы использовали React, под который Stockfish уже был адаптирован.

В этот раз мы столкнулись с другой трудностью — перед нами встал нелегкий выбор интернет-эквайринга, который должен был отвечать бизнес-требованиям проекта. Во-первых, на ABChess Web должны были быть доступны не только стандартные покупки, но и промокоды с возвратами. Во-вторых, на сайте должна была быть реализована возможность совершать покупки из других стран. По итогу наш выбор остановился на сервисе Paddle, который, в отличие от других эквайрингов, даёт возможность осуществлять продажи на европейском рынке.

‍

Новые фичи

После того, как сам веб-сайт был готов, мы приступили к реализации новых функций на платформе — на это у нас было отведено 5 месяцев.
‍
Так, мы внедрили рекламные баннеры, которые отображаются на сайте в зависимости от языка и платформы пользователя.

Мы также добавили возможность покупать курсы по отдельности. Если раньше для доступа к курсам приходилось покупать всю подписку, теперь — пользователь может сам выбирать, что ему изучать.

Среди прочего, мы интегрировали сервис с Kaspi Bank. Благодаря этому теперь из мобильного приложения банка можно купить подписку ABChess.

‍

Клиентский сайт

Начали мы с того, что усовершенствовали логику взаимодействия учеников с сайтом. К примеру, мы добавили в приложении и на сайте поиск по курсам и автору. Помимо этого, мы разработали механизм совета уроков. Это значит, что теперь, когда ученик ошибается в упражнениях на определенную тему, система предлагает ему посмотреть по ней уроки. Среди прочего, мы предоставили пользователям возможность кастомизировать доску и рисовать на ней стрелки, чтобы тренеры могли нагляднее доносить до учеников основы тактики.

‍

Административная панель

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

Другим значимым изменением стал добавленный нами функционал, позволяющий администратору создавать новые категории обучения. Так на сайте появились курсы по английскому и математике.
‍
На админ-панели также теперь появились новые роли — Контентмейкер, Аналитик и Учитель.

Пользователю с ролью Контентмейкер доступно только добавление нового контента. Новая роль позволила школе приглашать сторонних тренеров, которые могли внести свой вклад в образовательную программу.

Были также добавлены роли Аналитик и Учитель. Аналитик видит страницы статистики учеников и может проводить оценку их успеваемости, про Учителя — в следующем блоке.

‍

Мультиплеер

Одной из самых интересных задач, с которой мы столкнулись, стала разработка мультиплеера или, как это называлось в проекте ABChess — вебинара.

Вебинар — это набор упражнений, которые одновременно решает группа учеников. Он планируется и создается учителем заранее — учитель подбирает упражнения из обучающего раздела и каждому из них задает время на прохождение. Пока что вебинары доступны только для авторизованных пользователей, но в будущем планируется реализовать открытые вебинары.

Вебинар состоит из трех фаз — Лобби, Прохождение вебинара и Итоги. В Лобби ученики попадают до начала соревнования. Тут они могут переписываться с другими участниками и наблюдать за таймером, ведущим обратный отсчет до начала первого задания.

Далее, в указанное время, автоматически начинается сам вебинар. Ученики решают уже привычные пользователям платформы упражнения. Отвечая правильно, ученики зарабатывают баллы. Обновляемый в реальном времени рейтинг добавляет соревновательный момент.

После вебинара на экране выводятся победители этого мини-соревнования. Самые умные и внимательные размещаются на призовых местах с кубками, а остальные скромно ждут своей минуты славы в сторонке.

‍

Мультиплеер vs. Время

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

Несмотря на то, что всё проходило отлично, внезапно мы столкнулись с загадочным и непобедимым врагом по имени Время проблемой реализации локального времени на устройстве. В то время как у одних учеников еще шел обратный отсчет до начала вебинара, у других — уже появилось первое упражнение. Источник проблемы обнаружился сразу.
‍
Некоторые элементы системы, например анимацию правильных ходов, которая показывается после решения упражнения, невозможно рассчитать на сервере. Поэтому мы решили реализовать часть логики на фронтенде и рассчитывать все процессы на нём. К сожалению, это решение нас и подвело.

Срок, отведенный на разработку, подходил к концу, и проблему надо было устранить. Решение было одно — перенести максимум логики с фронтенда на бэкенд. Скоро код был переписан, а система протестирована. Мы были готовы сдавать проект заказчику.

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

‍