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

2023-09-11 15:43:18 Время чтения 10 мин 293

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

Каждый медик желает знать

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

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

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

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

Задача

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

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

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

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

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

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

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

Мы начали с проектирования

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

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

Переработали интерфейс

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

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

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

Только пусть будет Windows

Обычно мы запускаем бэкенд наших сервисов на Linux, но в случае с «Телементором» пришлось сделать исключение. Один из важных запросов заказчика — запуск сервера на Windows. Чтобы не адаптировать все инструменты под Windows и сэкономить время разработки, мы запустили серверную часть с помощью технологии Docker.

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

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

Фичи в архитектуре

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

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

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

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

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

Шина событий

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

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

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

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

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

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

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

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

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

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

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

Что у нас вышло:

В новой версии «Телементора» мы разработали удобный и понятный интерфейс.

Можно без особых усилий собрать систему под любую другую операционную систему
Доступно расширение: «Телементор» не надо дорабатывать, чтобы подключить к ней другие устройства, например интерактивные манекены и другие новые медицинские тренажеры.

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