(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93201023, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(93201023, 'hit', window.location.href);

Сделать из мамонта киборга: как мы переписали 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 на обычном компьютере.

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

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

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

***

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

0
21 комментарий
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Максим Павлов
Автор

Честно говоря не понял зачем объяснять бабушкам, что врачи учатся через телевизор :(

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Василий Кокорин

простите, но линия которую вы написали настолько кривая, что у меня все поплыло :D

Ответить
Развернуть ветку
Антон Большаков

Вот так и умирает С# очень печально что все меньше и меньше спецов по этому языку.
Ведь софт, написанный на С# - гораздо шустрее и менее обьемный чем все эти веб костыли.

Ответить
Развернуть ветку
Roman Rodin

Умирает/не умирает, но для внутренних самописных корпоративных систем, если парк машин на Windows, то WPF, в плане GUI, не понятно чем адекватно можно заменить. Разве что WinForms))

Ответить
Развернуть ветку
Максим Павлов
Автор

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

Так что по поводу скорости работы тут мы уже говорим о том, готов ли заказчик платить больше за систему, которая отвечает не за 300мс, а за 30

Когда-нибудь и питон с джаваскриптом умрёт, это эволюция, которую не остановить :)

Ответить
Развернуть ветку
Дмитрий Перепёлкин
Один из важных запросов заказчика — запуск сервера на Windows.
Что у нас вышло: Можно без особых усилий собрать систему под любую другую операционную систему

Из серии когда сделали то о чём не просили 😁
Ничего не имею против контейнеров, это взросло и солидно, но если заказчик настаивал на развёртке в Windows, возможно под это были причины? Может у них есть олдовый виндузятник, и если "приложение-установщик" сломается, они будут сильно переживать?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Максим Павлов
Автор

Из дополнительного мы запаковали фронт в электрон, а бэк в докер. C# — это то, с чего заказчик попросил переписать продукт

Ответить
Развернуть ветку
Максим Павлов
Автор

На самом деле просили:)

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

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

Так что проблем с олдовой виндой не было — всё было свежее

Ответить
Развернуть ветку
quaritexa

«Мы с нуля переписали «Телементор» на веб-технологиях.»
Что такое веб-технологии?

Ответить
Развернуть ветку
Максим Павлов
Автор

В нашем случае это были Python + ReactJS

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

В итоге в широком смысле имеем в виду скриптовый язык на бэке + фронт на HTML+CSS+JS, запускаемый в браузере

Ответить
Развернуть ветку
Roman Rodin
> Мы выполнили всю работу за три месяца — это в разы быстрее, чем если бы мы работали на технологиях, которые использовались при написании предыдущего решения.

Я пишу классический фронт на Реакте и "балуюсь" WPF (который использовался в предыдущей версии Телементора). По ощущениям, время разработки сопоставимо, просто порог вхождения в C#/WPF чуть выше, чем в JS/React/Vue.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Максим Павлов
Автор

Возможно, ощутимый выхлоп по скорости получится, если попробовать сделать на WPF что-то крупное

Но кстати если в критерий скорости добавить время поиска специалиста, то вывод будет однозначный :)

Ответить
Развернуть ветку
Roman Rodin

Сообщество WPF довольно закрытое (но дружелюбное). Можно достаточно быстро найти на профильных форумах и в чатах. Конечно, при адекватном вознаграждении.

Ответить
Развернуть ветку
Alexey Rusanov

Архитектура на ивентбазе, кек)

Ответить
Развернуть ветку
KTS

Проект 2018 года

Ответить
Развернуть ветку
Максим Павлов
Автор

Система должна быть расширяемой без модификации кода продукта.

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

Ответить
Развернуть ветку
Максим Павлов
Автор
Ответить
Развернуть ветку
18 комментариев
Раскрывать всегда