Сделать из мамонта киборга: как мы переписали C# приложение «Телементора»
Привет! Это Максим Павлов, управляющий партнёр 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 на обычном компьютере.
Что у нас вышло:
- В новой версии «Телементора» мы разработали удобный и понятный интерфейс.
- Можно без особых усилий собрать систему под любую другую операционную систему
- Доступно расширение: «Телементор» не надо дорабатывать, чтобы подключить к ней другие устройства, например интерактивные манекены и другие новые медицинские тренажеры.
Уже придумываем, как объяснить бабушке, что врачи теперь учатся через телевизор. Есть идеи?
***
Кстати, о других проектах и своём видении рынка мы делимся в телеграм-канале Программисты делают бизнес: приходите, у нас интересно!
Комментарий недоступен
Честно говоря не понял зачем объяснять бабушкам, что врачи учатся через телевизор :(
простите, но линия которую вы написали настолько кривая, что у меня все поплыло :D
Вот так и умирает С# очень печально что все меньше и меньше спецов по этому языку.
Ведь софт, написанный на С# - гораздо шустрее и менее обьемный чем все эти веб костыли.
Умирает/не умирает, но для внутренних самописных корпоративных систем, если парк машин на Windows, то WPF, в плане GUI, не понятно чем адекватно можно заменить. Разве что WinForms))
Память дешевеет каждый год, а отзывчивость получившейся системы получилось прям отличной.
Так что по поводу скорости работы тут мы уже говорим о том, готов ли заказчик платить больше за систему, которая отвечает не за 300мс, а за 30
Когда-нибудь и питон с джаваскриптом умрёт, это эволюция, которую не остановить :)
Один из важных запросов заказчика — запуск сервера на Windows.Что у нас вышло: Можно без особых усилий собрать систему под любую другую операционную системуИз серии когда сделали то о чём не просили 😁
Ничего не имею против контейнеров, это взросло и солидно, но если заказчик настаивал на развёртке в Windows, возможно под это были причины? Может у них есть олдовый виндузятник, и если "приложение-установщик" сломается, они будут сильно переживать?