Сегодняшнее руководство предоставлено разработчиком программного обеспечения Asymmetrik Шейном О’Нилом. Если вы пропустили недавний вебинар Шейна по созданию FHIR-приложений следующего поколения, вы можете посмотреть его здесь или воспользоваться пошаговым руководством ниже.

СОЗДАНИЕ ПРИЛОЖЕНИЙ FHIR НОВОГО ПОКОЛЕНИЯ

Исторически сложилось так, что многие онлайн-приложения FHIR ограничены с точки зрения масштабируемости и удобства обслуживания. Как правило, они имеют минимальный набор функций и не очень помогают разработчику. Мы можем сделать намного лучше. Используя Asymmetrik FHIR App Starter, мы можем пройти через стандартную настройку и перейти непосредственно к кодированию логики нашего приложения.

Начнем с клонирования Asymmetrik FHIR App Starter и открытия VS Code:

$ git clone https://github.com/Asymmetrik/fhir-app-starter
$ code fhir-app-starter

Ваш код VS может немного отличаться от моего из-за разных плагинов и тем. Все в порядке! Далее мы рассмотрим, как работает этот проект.

СТРУКТУРА ПРОЕКТА

Давайте рассмотрим роли некоторых из этих каталогов.

Src
Структура проекта нашего приложения React является модульной и использует шаблон Контейнерные компоненты для простой организации взаимодействия с магазином Redux.

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

  • Actions.js В них содержатся наши создатели действий.
  • Constants.js Здесь хранятся наши типы действий
  • Index.js Это наш компонент React.
  • Reducers.js Наши редьюсеры перемещают отправленные действия из наших саг в наше состояние.
  • Sagas.js В них хранятся наши саги, которые обрабатывают асинхронные действия и управление потоком.
  • Селекторы Состояние селекторов с помощью Повторного выбора

Конфигурация

Этот каталог содержит нашу конфигурацию Webpack, а также нашу конфигурацию SMART. SMART (он же SMART на FHIR) — это протокол для безопасного запуска приложений FHIR на серверах FHIR. Подробнее о SMART здесь.

Общедоступно

В открытом доступе хранятся наши статические шаблоны файлов для создания launch.html и index.html. Эти два маршрута необходимы для выполнения SMART на рукопожатии FHIR.

ЗАПУСК И СОЗДАНИЕ НАШЕГО ПРИЛОЖЕНИЯ

Если вы хотите запустить приложение с помощью Webpack Dev Server, просто запустите yarn start. Это разместит приложение на порту 3000.

Мы видим баннер Не подключен к серверу FHIR, потому что мы не запускались из EHR. Сделаем это с помощью Cerner’s Code Sandbox.

  • Шаг 1. Создайте учетную запись в песочнице Cerner’s Code и войдите в нее.
  • Шаг 2. Создайте приложение, нажав "Новое приложение".
  • Если вы разрабатываете локально, используйте следующее:

  • Шаг 3. Обновите конфигурацию приложения.

Приложение автоматически встраивает информацию в приложение. Все, что вам нужно сделать, это обновить файл config/smart.js.

  • Шаг 4. Запуск из Cerner’s Code Sandbox.
  • В песочнице кода Cerner щелкните свое приложение. Выберите «Начать тестирование». Выберите пациента и выберите «Запустить». После запуска вы можете быть перенаправлены на страницу входа. Используйте портал имени пользователя и портал пароля. Если вы все настроили правильно, вы должны увидеть, что ваше приложение было запущено правильно.

СОЗДАЕМ НОВУЮ ФУНКЦИЮ ВМЕСТЕ

В нашем домашнем компоненте давайте запросим условия пациента с помощью Redux Saga.

Эти изменения в наших сагах сделают так, чтобы состояние пациента было отправлено. Мы отправляем действие с типом Home/LOAD_CONDITIONS и задаем ему наши условия в форме свойства payload. Таким образом, мы можем зафиксировать это действие в наших редюсерах и соответствующим образом обработать его. Теперь давайте обновим наши редукторы.

Здесь уже есть несколько кейсов, которые перехватывают другие действия, но мы можем добавить наше новое действие и перехватывать и его. Мы можем обновить наше черновое состояние, которое станет следующим состоянием, с нашими условиями. Так что теперь они будут расположены в пределах нашего государства. Мы можем сопоставить это изменение состояния со свойствами нашего компонента Home, а затем отобразить их на экране. Наш компонент находится в index.js, поэтому давайте внесем изменения в наш код там. Сначала нам нужно сопоставить наше состояние Redux с нашими реквизитами, изменив функцию mapStateToProps.

Теперь у нас есть условия в свойствах нашего Компонента, и мы можем визуализировать их так, как нам нравится. Для этого примера я просто сделал небольшую таблицу с помощью Semantic UI.

Мы можем увидеть наши изменения, перезапустив наше приложение.

Мы видим, что отображаются состояния нашего пациента.

ЗАКЛЮЧЕНИЕ

Сегодня мы успешно клонировали fhir-app-starter, зарегистрировали новое приложение в Cerner’s Code Sandbox и даже создали новую функцию. Попробуйте и дайте нам знать, как вы это сделали, написав в Твиттере Asymmetrik или я! И не стесняйтесь задавать вопросы или проблемы на нашем Github.

Шейн О’Нил — разработчик программного обеспечения в Asymmetrik, специализирующийся на создании приложений FHIR, серверов FHIR и обработке ресурсов FHIR. Он помог разработать популярную реализацию MongoDB FHIR Server node-fhir-server-mongo. Среди технологий, с которыми ему больше всего нравится работать, — NodeJS, ReactJS, Redux и PostgreSQL.