Сделать из мамонта киборга: как мы переписали C# приложение «Телементора»
Рассказываем, как в сжатые сроки мы перешли на веб-технологии в десктопном приложении и ничего не потеряли
Задача:
Компания Open Vision обратилась с просьбой переписать устаревшее десктопное приложение «Телементор», используемое для обучения будущих медиков. Основные проблемы заключались в устаревшем интерфейсе и неподдерживаемом коде на C#, что затрудняло дальнейшее развитие и поддержку системы. Задача состояла в том, чтобы создать новый, современный и удобный интерфейс, а также переписать «Телементор» с использованием веб-технологий, обеспечив легкость его дальнейшей доработки и расширения.
Причина:
Старое приложение на C# было трудно поддерживать и развивать из-за устаревшего кода и сложности поиска специалистов для работы с ним. В дополнение к этому, рынок десктопных приложений значительно сократился, и большинство сервисов перешли на веб-платформы. Это обусловило необходимость миграции «Телементора» на более современные технологии, чтобы обеспечить долговременное функционирование системы, кроссплатформенность и удобство в дальнейшем расширении функционала.
Каждый медик желает знать
«Телементор» — интерактивная система обучения для будущих медиков: с практическими заданиями и возможностью контролировать качество выполнения манипуляций. У «Телементора» есть три режима: обучение, практика и экзамен.
Внешне это выглядит как конструкция из двух 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 на обычном компьютере.
Что у нас вышло:
- В новой версии «Телементора» мы разработали удобный и понятный интерфейс.
- Можно без особых усилий собрать систему под любую другую операционную систему
- Доступно расширение: «Телементор» не надо дорабатывать, чтобы подключить к ней другие устройства, например интерактивные манекены и другие новые медицинские тренажеры.
Уже придумываем, как объяснить бабушке, что врачи теперь учатся через телевизор.
В результате проделанной работы был успешно выполнен полный рефакторинг системы «Телементор», что позволило значительно улучшить ее функциональность и удобство использования. Переписан интерфейс и миграция на веб-технологии: Команда разработала новый, более интуитивный и современный интерфейс, полностью переписав «Телементор» с десктопного приложения на веб-технологии с использованием Electron и Docker. Это обеспечило не только более удобный и понятный для пользователей интерфейс, но и значительно упростило процесс последующей доработки и обновления системы. Обеспечение кроссплатформенности и упрощение развертывания: Благодаря использованию веб-технологий, новая версия «Телементора» стала кроссплатформенной, что позволяет запускать ее на различных аппаратных платформах и операционных системах без дополнительных доработок. Для установки серверной части было создано специальное приложение-установщик, упрощающее процесс до уровня установки обычной программы на Windows, что избавило заказчика от необходимости нанимать специалистов для настройки системы. Оптимизация работы системы и внедрение новых архитектурных решений: В системе был внедрен протокол WebSocket для обеспечения мгновенной реакции на управляющие сигналы с планшетов, что существенно повысило скорость и отзывчивость всех компонентов системы. Кроме того, была реализована шина событий (eventBus), которая значительно упростила процесс добавления новых компонентов в систему, таких как интерактивные манекены, и улучшила коммуникацию между существующими модулями. Надежность и устойчивость к сбоям: Для обеспечения надежности работы системы была проработана и внедрена стратегия обработки возможных ошибок и сбоев. Это позволило минимизировать риски сбоев во время проведения экзаменов, обеспечив сохранность данных и стабильность работы всех компонентов. Готовность к расширению и будущим изменениям: Новая архитектура системы не только решает текущие задачи, но и готова к будущим расширениям. Например, без необходимости значительной доработки можно подключать новые устройства и медицинские тренажеры, что делает систему более гибкой и масштабируемой. Таким образом, обновленный «Телементор» стал более современным, удобным и легко поддерживаемым продуктом, готовым к дальнейшему развитию и адаптации под новые потребности заказчика.
Источники изображений:
Иллюстрации KTS
Интересное:
Новости отрасли:
Все новости:
Публикация компании
Профиль
Контакты