Сделать из мамонта киборга: как мы переписали C# приложение «Телементора»

Привет! Это Максим Павлов, управляющий партнёр KTS. Рассказываю, как в сжатые сроки мы перешли на веб-технологии в десктопном приложении и ничего не потеряли.

«Телементор» — интерактивная система обучения для будущих медиков: с практическими заданиями и возможностью контролировать качество выполнения манипуляций. У «Телементора» есть три режима: обучение, практика и экзамен.

Внешне это выглядит как конструкция из двух IP-камер, планшетов студента и преподавателя и двух телевизоров: один расположен горизонтально, как стол, другой — закреплен перед студентом.

Эта система позволяет до автоматизма отработать важные медицинские манипуляции: например, проводить инъекции. В системе задействованы резиновые модели различных частей тела — рука, голова, желудок, ягодицы — а также необходимые инструменты и расходные материалы.

Ещё «Телементор» обеспечивает объективные экзамены с видеофиксацией всех процессов. Над столом закреплены две камеры: одна, фронтальная, позволяет создать «эффект зеркала» — студент может наблюдать за собой. Другая камера снимает сверху. Такая съемка с двух ракурсов позволяет точно определить, правильно ли студент выполнил задание. После сдачи экзамена файл с видеозаписью сохраняется на сервере «Телементора».

К нам обратилась компания Open Vision с запросом переписать «Телементор». Мы выделили два проблемных направления:

Проблема № 1: Устаревший интерфейс

Дизайн прошлой версии «Телементора» разрабатывался давно и поэтому успел устареть.

Проблема № 2: Неподдерживаемый код

Изначально «Телементор» был написан на языке C#. Старую версию было сложно дорабатывать и поддерживать: программист, который писал код, перестал работать в компании, а найти нового C#-разработчика десктопных приложений было непросто ещё в 2019 году. За последние 10 лет рынок десктопных приложений уменьшился, и теперь большинство сервисов переходят на веб.

Нам нужно было:

Чтобы показать заказчику процесс использования продукта, мы создали user story map. Кроме того, был дополнительный нюанс — в этой системе есть четыре интерфейса. И всё, что происходит в каждом из них, нам нужно было расписать.

Чтобы показать, как компоненты системы связываются между собой, мы сделали отдельный story map. Он описывал шаги, которые проходит система для связывания компонентов друг с другом. При разработке обычных веб-сервисов в этом нет необходимости, потому что всё стандартно: есть интерфейс (фронтенд) и есть бэкенд.

Мы с нуля переписали «Телементор» на веб-технологиях. Эту задачу мы решили с помощью Electron и Docker.

Почему именно веб-технологии?

При разработке веб-сервисов мы настраиваем процесс автоматического обновления. Другими словами, обновления, которые запрограммировал разработчик, доставляются до тестового сервера без участия программиста. Это позволяет существенно сократить время разработки: обычно специалисту необходимо проверять работоспособность всех изменений минимум три-четыре раза в день.

Для «Телементора» мы настроили такой же процесс, но с необходимым техническим усложнением: обновления доставлялись не до сервера в Интернете, а до сервера «Телементора», который стоял у нас в офисе.

В системе «Телементор» все управляющие сигналы поступают с планшетов: они как пульты дают сигнал серверу, а затем сам сервер рассылает сообщения — управляющие сигналы другим модулям, например, включить камеру или воспроизвести видео.

Моментальная реакция

Для пользователя важна скорость. Он не будет разбираться в архитектуре системы и оправдывать этим то, что «опять что-то зависло».

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

В «Телементоре» благодаря этой технологии все устройства без промедлений узнают о старте экзамена. А перемотка видео на телевизоре происходит в тот же момент, когда на планшете нажимается соответствующая кнопка.

Шина событий

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

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

Чтобы добавить новый компонент, например интерактивного манекена, который должен включаться при старте экзамена, нужно просто «добавить в общий чат» этого манекена и сделать так, чтобы он включался, когда увидит в общем чате сообщение «экзамен начался».

Если бы мы связали все компоненты напрямую друг с другом, было бы сложнее. Чтобы добавить манекен в систему, пришлось бы дорабатывать state machine так, чтобы она отправляла команду на включение не только камерам, экранам и второму планшету, но ещё и манекену.

Страховка, если что-то пошло не так

Система «Телементор» состоит из семи модулей, в каждом из которых что-то может пойти не так: на жёстком диске кончится место, выключится камера, произойдет ошибка записи, оборвётся соединение между любыми компонентами и так далее.

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

Простота установки

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

Чтобы нашему заказчику не пришлось нанимать отдельного сотрудника со специальными навыками для развертывания серверной части на новых «Телементорах», мы разработали специальное приложение-установщик. При запуске оно запрашивало у пользователя только адреса камер и папку, в которой хранить видеозаписи экзаменов.

Так что установить серверную часть теперь так же просто, как и установить Word на обычном компьютере.

Уже придумываем, как объяснить бабушке, что врачи теперь учатся через телевизор. Есть идеи?

Кстати, о других проектах и своём видении рынка мы делимся в телеграм-канале Программисты делают бизнес: приходите, у нас интересно!