Фронтенд-разработка для медицинской платформы

SPA (веб-приложение) для мониторинга состояния пациентов медицинских учреждений в режиме реального времени, управления лечебно-диагностическими процессами и поддержки принятия решений.

Сверстали интерфейсы, запрограммировали бизнес-логику на JavaScript с использованием React, REST API и Web Sockets.

Запрос и описание проблемы

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

Краткая суть запроса:

  1. Необходимо разработать фронтенд-часть приложения: написать бизнес-логику и сверстать интерфейсы.
  2. Имеются наработки по вёрстке и разработано API для бэкенда.

Внутренняя команда клиента уже несколько лет занималась развитием и внедрением данной платформы. Разработка новой версии продукта была им начата с проработки системы UI-компонентов (компонентной архитектуры). Эти компоненты должны быть максимально независимы, использоваться в различных проектах и импортироваться через NPM систему пакетов. К моменту обращения к нам у клиента имелось большое количество готовых компонент и только несколько страниц интерфейса разной степени готовности.

Универсальная компонентная архитектура — хорошее решение, когда необходимо разрабатывать и развивать группу единообразных проектов.

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

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

Это был их первый опыт привлечения сторонней команды к разработке.

Выбор исполнителя

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

По итогу мы предоставили ориентировочную смету на работы с предложением и обоснованием работы по схеме T&M (Time&Material — оплата за фактически затраченное время). Данную схему мы используем в проектах с высокой степенью неопределенности. Подход позволяет обеспечить высокую гибкость и скорость разработки, предоставляет возможность менять требования, состав и объем работ. Часто работа «по факту» позволяет сэкономить до 20 % средств.

В итоге клиент выбрал наше предложение.

Работа и результат

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

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

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

В последствии мы смогли оперативно масштабировать команду под нужды заказчика, когда потребовалось одновременно и в сжатые сроки запустить в разработку ещё три подпроекта платформы.

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

Работа проходила несколькими этапами длительностью примерно по 7 недель.

На первом этапе разработали раздел процедур назначенных пациентам:

  1. Исправили существующие проблемы в функциональности приложения.
  2. Доработали верстку.
  3. Разработали механизмы взаимодействия с API бэкенда.
  4. Написали бизнес-логику.
  5. Разработали механизм локализации приложения на различные языки с использованием gettext подхода. Для внедрения новой языковой версии приложения достаточно получить от переводчиков новый файл локализации и добавить его в систему сборки приложения. Соответствующая локализация будет добавлена автоматически.

На втором этапе:

  1. Добавили новые, отслеживаемые параметры для раздела процедур.
  2. Заложили в архитектуру проекта механизмы работы с Web Sockets, что позволило отслеживать в реальном времени информацию по пациентам.
  3. Добавили функциональность виджета тревог, который позволяет оперативно показывать уведомление если показания пациента достигают критических значений.
  4. Интегрировали страницу о пациенте с API, написали соответствующую бизнес-логику.

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

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

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

В итоге — смогли обеспечить не только соблюдение, но и опережение сроков.

Технологии и команда

Технологии: React, Mobx, TypeScript, Flow, Rest API, Ant design, Web Sockets.

Команда: 4 разработчика.

Длительность проекта: 6 месяцев.

Отзыв клиента

Начали сотрудничать со «Студией 15» для усиления направления frontend-разработки (React). Менеджмент и разработчики доказали свою компетентность и эффективность, в результате чего стали основной командой разработки. Лучшее на рынке соотношение стоимость-скорость-качество.

Иван Федоров, заместитель директора по информационным технологиям

Наши выводы

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

Нужна фронтенд-разработка? Оставляете заявку → Наш тимлид фронтенда связывается с вами → Совместно находим решение