OrbitSoft починил: как мы переписали медицинский видеопортал с нуля

Компания проводит операции в сфере эстетической и пластической хирургии в 11 клиниках в России, Грузии и Китае. Под собственным брендом выпускает нити для омолаживающих процедур: подтяжка и укрепление кожи. Продукцию компании используют хирурги и косметологи в 50 странах мира.

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

• общаться, обсуждать продукты и методики, задавать вопросы;

• поддерживать актуальность своих знаний, повышать квалификацию;

• знакомиться с новыми продуктами компании и учиться выполнять процедуры с их применением.

Портал помогает компании сопровождать клиентов после покупки, оказывать сервис высокого уровня, собирать вокруг себя профессиональное сообщество и поддерживать репутацию лидера отрасли.

В OrbitSoft компания пришла с проблемой: портал морально устарел, часто падал, потреблял много ресурсов, работал медленно. Например, страницы с видео загружались по 10 секунд первый раз и по 2 секунды из кеша. Пользователь открывал главную страницу и ждал, когда на ней просто появятся видео.

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

Компания решила поручить обновление портала команде разработчиков на аутсорсе.

Видеопортал был написан на Ruby on Rails, но связь с изначальными разработчиками потеряли. Компания пришла к выводу, что поддерживать его на Ruby нет смысла: язык громоздкий и сейчас почти не используется.

Компания обсудила с OrbitSoft новый технологический стек и сформулировала техническое задание:

• Переписать серверную часть портала на PHP с использованием фреймворка Symfony.
• Реализовать интеграцию с системой авторизации Passport и стриминг-сервисом Wowza, которыми пользуется заказчик.
• Добавить интеграцию с Zoom, расширенный поиск по всем разделам портала, текстовые посты, рекламные врезки в видео.
• Вместе с бэкендом переделать фронтенд на Angular и мобильные приложения.

Разработка портала заняла 9 месяцев чистого времени. Проектом занималась команда из 6 человек: бэкенд, верстальщик, фулстек, 2 мобильных разработчика и проджект-менеджер.

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

База данных была спроектирована неоптимально. Мы переделали структуру таблиц. Это позволило нам ускорить отдачу контента, теперь видео появляются на странице мгновенно.

Раньше у заказчика все компоненты портала хранились вместе на одном сервере и потребляли одни и те же ресурсы. Соответственно, когда нагрузка увеличивалась, ресурсов не хватало всем. Например, начиналась трансляция в Wowza — чем больше к ней добавлялось зрителей, тем больше тормозил фронтенд. На нескольких тысячах пользователей вся система падала.

Мы разложили компоненты портала на 4 сервера и систему хранения данных (СХД) на 10 терабайт:

• 1-й сервер: фронтенд и часть бэкенда — логика на PHP;

• 2-й сервер: база данных MySQL;

• 3-й сервер: стриминг-сервис Wowza;
  

• 4-й сервер: модуль транскодирования;
  

• СХД: загруженные видео, транскодированные трансляции, рекламные ролики, картинки к постам.

Со сложностями мы столкнулись, когда понадобилось загружать на портал большие видео — по 5—7 гигабайт. Изначально мы собирались принимать файлы целиком через стандартный HTTP. Но он не рассчитан на такие объемы и не предполагает докачки в случае обрыва связи. Как мы нашли решение этой технической задачи, рассказали в другой статье.

Заказчик пользуется сторонними сервисами: системой авторизации Passport и стриминг-сервисом Wowza. Когда мы переписали бэкенд, пришлось заново настраивать с ними интеграцию.

Система авторизации Passport — это единая форма входа во все сервисы заказчика: интернет-магазин, приложение, школу с обучающими курсами, порталы для врачей и пациентов. Она работает как авторизация через Google или Mail.ru: создав аккаунт, можно использовать данные для входа в другие онлайн-сервисы. Мы связали новый портал с Passport. Теперь ранее зарегистрированные пользователи могут на него зайти используя свои логин и пароль.

Wowza Streaming Engine — это система для передачи и записи потокового видео. Заказчик использует ее для онлайн-трансляций уроков: хирург выполняет операцию, камеры его снимают, Wowza записывает видео с камер и подготавливает его к просмотру, а пользователи смотрят прямую трансляцию на видеопортале.

Предыдущая интеграция с Wowza была написана на Java. Этот сервис отслеживал начало и окончание трансляции, создавал обложку и транскодировал видео под разные разрешения и форматы. Но сервис работал с ошибками: например, при удалении видео часто не чистил место.

Мы переписали сервис на Golang: он быстрее, чем Java, и покрывает все задачи проекта. Однако при интеграции сервиса с Wowza всплыла проблема. У системы есть SDK, но только на Java. И есть REST API, но он не позволяет подписываться на события. Как связать сервис на Go с Wowza, сохранив весь объем задач?

Рассказали в другой статье, как обошли проблему и настроили интеграцию.

Заказчик решил, что кроме трансляций в Wowza ему нужно собирать коллективные встречи в Zoom. Мы настроили интеграцию — теперь администраторы портала и пользователи могут созваниваться в Zoom не открывая саму программу. Вот как это работает:

• Администратор из своей части портала создает встречу, описывает ее, назначает дату, нажимает кнопку «Создать». Бэкенд портала создает встречу в Zoom.

• Когда встреча заканчивается, Zoom конвертирует ее в видеофайл и уведомляет об этом бэк.

• Когда администратор начинает встречу, бэк рассылает пользователям ссылки на нее, пользователи могут подключиться.

• Пользователи видят анонс, нажимают кнопку «Подписаться».

• Бэкенд забирает видео, передает его сервису транскодирования, после чего публикует на портале.

Посты. На старом портале основным контентом было видео. Содержание видео не индексируется поисковиками, что затрудняет SEO-продвижение. Мы добавили раздел «Публикации» со статьями, в которые можно включать поисковые запросы. В этом разделе заказчик публикует анонсы событий, новости о компании и продукции.

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

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

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

Библиотека Angular Material. Чтобы ускорить работу, мы использовали Angular Material от Google. Это библиотека готовых компонентов интерфейса: кнопок, элементов меню, форм регистрации, всплывающих окон. Библиотека разработана по принципам Material Design — концепции Google, объясняющей, как создавать интерфейсы мобильных и веб-приложений так, чтобы все помещалось в маленькие экраны смартфонов и было удобно управлять приложением с помощью пальцев.

С Angular Material разработка идет быстрее:

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

• Фронтенд-разработчик экономит время: не описывает функции компонентов в коде, а добавляет в проект набор компонентов Angular Material и подключает на каждой из страниц нужные.

Мультиязычность. Изначально разработка сайта велась на английском языке. Чтобы сделать русскоязычную версию интерфейса, мы использовали механизмы Angular: отметили специальным тегом места, где есть текст, извлекли его и перевели на русский язык, Angular подхватил перевод и сформировал русскую версию интерфейса. Это заняло меньше времени, чем добавление перевода вручную.

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

Для разработки нового мобильного приложения мы выбрали фреймворк Qt. Вот почему:

• Кросс-платформенный фреймворк. Qt подходит для разработки на iOS и Android. На нем написаны участки кода с общей логикой приложения, одинаковой для каждой операционной системы. Это позволило сэкономить бюджет на разработку: понадобилась одна команда аутсорс-разработчиков вместо двух.

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

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

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

Оптимизировали портал, исправили недоработки:

• раньше страницы с видео загружались по 10 секунд, сейчас на это уходит меньше секунды;

• большие видеофайлы загружаются на сервер полностью, независимо от размера и скорости интернета;
• старый портал не выдерживал, когда прямой эфир смотрели несколько тысяч пользователей. Сейчас трансляцию могут одновременно смотреть более 10 тысяч человек.

Настроили интеграцию с другими сервисами заказчика: единой системой авторизации и сервисом для прямых трансляций.

Добавили новые функции: текстовые посты, интеграцию с Zoom, расширенный поиск на сайте, рекламу в видеороликах.

Сейчас, в июле 2022 года, заказчик переносит контент на новую версию портала. Для пользователей работает старая версия. Как только сайт перезапустят, мы опубликуем приложение в магазинах. Пользователи получат его в виде обновления.

Заказчик доволен результатами проекта и планирует поручить OrbitSoft доработку других своих сервисов. Например, системы единой авторизации.