forked from EllieShivers/BasicSmartDemo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
259 lines (243 loc) · 12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Getting started with SMART on FHIR</title>
<link rel='stylesheet' type='text/css' href='./css/tutorial.css'>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>SMART on FHIR Tutorial</h1>
</div>
<div id="menu">
Introduction<br><br><br>
<u>Your First SMART App</u><br><br>
Getting Started<br><br>
Publish your Application<br><br>
EHR/Provider Launch<br><br><br>
<u>Launch Contexts</u><br><br>
<u>Client Examples</u><br><br>
</div>
<div id="content">
<h2>Introduction</h2>
<p>
This tutorial will walk the reader through the basics of creating a SMART on FHIR application and deploying
that application to various FHIR sandbox environments, covering Cerner, Epic, and SMART.
</p>
<p>
This tutorial is inspired by the Cerner SMART on FHIR tutorial, taking cues from their work in terms of
project
structure and overall approach to demonstrating SMART on FHIR while attempting to create an updated, vendor
agnostic look at SMART on FHIR applications. Key differences between this tutorial and the Cerner version
include:
</p>
<ul>
<li>
Utilizing the 2.3.10 version of the SMART JavaScript Client library, which features a major change from
the 1.x version included in the Cerner tutorial. For more information, see the following section
regarding Fhir.js.
</li>
<li>
Provides FHIR R4 examples in addition to dstu2, as well as version detection using the client.
</li>
<li>
Simplified JavaScript which may be more easily understood by developers inexperienced with JavaScript or
jQuery. (Note: Because of this, code should not be considered indicative of JavaScript best
practices.)
</li>
<li>
Provides instructions for testing with Epic's sandbox using LaunchPad.
</li>
</ul>
<h3>SMART JS Client 1.x vs 2.x - Fhir.js</h3>
<p>
Early versions of the SMART JS client included integration with the Fhir.js library, which is reflected in
the
Cerner tutorial example code. The primary loss here is the use of some API calls, which must reproduced
using
the SMART JS Client request function.
</p>
<p>
For example, the Cerner code includes the line "smart.patient.api.fetchAll({type: 'Observation',...})"
utilizing the Fhir.js API element.
To do similar using the SMART JS client, you could simply
</p>
<p>
For more on this issue, you can read the SMART JS documentation <a
href="http://docs.smarthealthit.org/client-js/#fhirjs-integration">here</a>.
</p>
<h3>Prerequisites and Recommendations</h3>
<ul>
<li>
You should have at least a basic understanding of working with FHIR Resources and Bundles, though the
code was written in an attempt to be accessible to FHIR novices.
</li>
<li>
In order to deploy to GitHub Pages for some demonstrations, you are required to have a
<a href="http://www.github.com" target="_blank">GitHub</a> account.
(Setting up any other accounts required will be discussed as part of the tutorial itself.)
</li>
</ul>
<ul>
<li>
For local testing, it is also recommended that you have an IDE of your choice and NPM installed with
http-server. Http-server
provides an excellent means of serving content on your local machine without having to worry about GH
Page's
hourly build limits.
</li>
</ul>
<h3>Resources</h3>
<ul>
<li>
<a href="https://engineering.cerner.com/smart-on-fhir-tutorial/" target="_blank">Cerner SMART on FHIR
Tutorial</a></li>
<li>
<a href="http://docs.smarthealthit.org/client-js/" target="_blank">SMART JS Client Library
Documentation</a>
</li>
<li>
<a href="http://hl7.org/fhir/" target="_blank">FHIR Specification</a>
</li>
</ul>
<h1>Part 1 - Your First SMART App</h1>
The first thing we will do is walk you through getting our sample application up and running
<h2>Getting Started</h2>
<h3>Clone/Fork The Repository</h3>
<p>
The very first thing you should do is clone or fork this repository to your own GitHub account.
</p>
<h3>Tutorial and Sample Application Project Structure</h3>
<p>
This project is structured such that the static tutorial pages are found in the root directory while the
sample application resides at "/app". Accessing the root will bring you to this page. This is important to
keep in mind once you begin configuring your launch and redirect uris, as you must ensure you base
everything
off of the "/app" path. E.g. http://some-host/app/launch.html instead of http://some-host/launch.html.
</p>
<p>
The application "/app" folder includes six files:
</p>
<ul>
<li>
./index.html - This is the primary application content page which will be your redirect location. This
file includes the script tag needed to handle the SMART Oauth2 authorization and subsequent resource
requests.
</li>
<li>
./launch-cerner.html - This is an R4 launch page intended for use with the Cerner R4 sandbox. It sets
the scope to include "patient/MedicationRequest.read" to be compatible with R4 FHIR structures. (Scopes
will be discussed in more detail momentarily.)
</li>
<li>
./launch-epic.html - This is the dstu2 launch page intended for use with Epic and dstu2 FHIR servers. In
place of the MedicationRequest resource, it sets scope for MedicationOrder.
</li>
<li>
./launch.html - This is a convenience file include for use with any other sandboxes you wish to test,
allowing you to maintain distinct launch contexts for multiple simultaneously. It includes commented
out versions of the scopes for both dstu2 and R4.
</li>
<li>
./css/app.css - This is just your friendly neighborhood CSS styling so the sample application isn't too
hideous to look at.
</li>
<li>
./js/fhir-demonstration.js - This is the core JavaScript used in the application. It consists of a
series
of basic functions that demonstrate how to use the client to request data from the FHIR server.
</li>
</ul>
<h2>Publish your Application</h2>
<h3>GitHub Pages</h3>
<p>
GitHub Pages is the recommended means of standing up your application for use on SMART sandboxes.
Here we will go through the steps needed to get up and running.
</p>
<ol>
<li>
If you haven't, fork this repository to your own GitHub account. You may do so using the
"Fork" option in the top right corner of the GitHub browser interface. Alternatively, you
may download or clone the repository locally and then push it to your own repo from there.
</li>
<li>
In your repo, go to "Settings". You will be taken to the main "Options" section of the repository
settings. If you are not here, select
"Options" on the left.
</li>
<li>
Scroll down until you see "GitHub Pages". Under "Source" select the branch you would like to
use. If you wish to create a branch specific to your GH Pages deployment, you can push your live
code to that branch and then select it here. Otherwise, just choose "master". Leave the folder option
as "/ (root)". Click "Save" when ready.
</li>
<li>
Your code will now be published at:<br>
https://[your-user-name].github.io/BasicSmartDemo/<br>
Keep in mind that this specific link will take you to this tutorial, <em>not</em> your
application given the project structure. Your application can be found at:<br>
https://[your-user-name].github.io/BasicSmartDemo/app/
</li>
</ol>
<p>And you're all done!</p>
<h3>Publish Locally with http-server</h3>
<p>
http-server provides a simple way to publish a local HTTP server for testing purposes.
For more information, you can view http-server on their NPM directory page
<a href="https://www.npmjs.com/package/http-server" target="_blank">here</a>.
</p>
<p>The simplest means to install http-server is using NPM, with the line:<br>
<code>npm install --global http-server</code><br>
In the project directory, you can then start the server with just:<br>
<code>http-server</code><br>
You will be given a list of IPs which you can access the server from. Remember the project
structure means the root will be this tutorial, so you would access the application via
something such as "http://127.0.0.1:8080/app".
</p>
<p>
Please be aware that hosting your application locally may not work properly with some sandboxes, causing
issues
with the redirect URI. This is predominantly a means for quick local testing with open sandboxes to avoid
issues with GitHub Pages build limits.
</p>
<h2>Sandbox EHR/Provider Launch</h2>
The following instructions demonstrate performing a provider launch, such as through an EHR.
<h3>Cerner</h3>
<h3>Epic</h3>
<h3>SMART Health IT Launcher</h3>
<p>
The SMART Health IT Launcher provides a open endpoint with which test your application that is less
restrictive than the Epic and Cerner sandboxes.
</p>
<h4>Steps to Launch</h4>
<ol>
<li>
Navigate to the launcher at
<a href="https://launch.smarthealthit.org/" target="_blank">
https://launch.smarthealthit.org/</a></li>
<li>Select the following options:
<ul>
<li><strong>Launch Type:</strong> Provider EHR Launch</li>
<li><strong>FHIR Version:</strong> R4 (See below regarding dstu2)</li>
<li><strong>Patient:</strong> Select any patient or leave blank.</li>
<li><strong>Provider:</strong> Select any provider or leave blank.</li>
</ul>
</li>
</ol>
<p>
If you have any issues, try disabling the "Simulate launch within the EHR user interface" option under
Launch Type. You are also able to open the sample application with the dstu2 endpoint. Dstu3 works as well,
though will not display any medications.
</p>
<p>
<img src="./images/smart-health-it-launcher.jpeg" alt="SMART Health IT Launch Settings">
</p>
<p>
It is recommended to use the patient browser to find a patient on the Sandbox that includes Condition resources,
MedicationRequest resources (or MedicationStatement for dstu2 launches) and Observation resources relating to weight and height.
</p>
</div>
</div>
</body>
</html>