Сегодняшнее руководство предоставлено разработчиком программного обеспечения 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.