Build Your First App

Read this if you want to build a new healthcare application for eventual deployment to hospitals on the Commure platform.

Prerequisites

• git
• yarn
• Some familiarity building React applications

Set up your .npmrc and Commure Developer Account

If you haven't already, make sure you:

• Set up a Commure Developer Account
• Configure your local npm to pull @commure packages from the private Commure NPM registry

Details are in the Account Setup guide.

Register your application

In order to connect with the platform you'll first need to register an application with the platform. If you do not register your application then it has no way to authenticate and interact with the Commure platform. You can register your app by logging into the developer portal and following these instructions:

1. Click My Apps in the sidebar, then the Register button to register a new application.
2. Choose SPA for the application type. There are a few different types of applications, but for this tutorial, we will be developing a Single Page Application.
3. Fill in the Application Name section. For the purposes of this tutorial, we'll call it SMART Hello World.
4. (Optional) Fill out the Name of Organization field with the name of your company or organization.
5. (Optional) In the User Type drop down select whether this application is for Patients, Practitioners, or Other for any person who might use the application, but do not fit into the first two categories.
6. (Optional) Fill out the Application Description field with a summary of what your application does. For example you might put something like, "Help patients order refills on their medication easily and get approval without the hassle of calling up your doctor and pharmacy."
7. Set the Redirect URL field to http://localhost:1234/callback for this tutorial. You can always add other ones or change this one later. This is what you would want for local development, but you should later add callback URLs for your application in production. The Redirect URL is where the application should send you after one logs in and authenticates with the platform. The platform will send you to the URL in order to finish up the OAuth 2.0 authentication flow.
8. Click the Register button. You'll see in a confirmation screen with the details of your new application. You should see a CLIENT ID on this screen. Note it down as you'll need it for later on in this tutorial.

Set up the Commure SMART App boilerplate

Use our create-react-app Hello World template to easily get up and running.

1yarn create react-app my-commure-smart-app --template @commure/smart-app-typescript

Before you can successfully run the app with `yarn start`, you need to set your FHIR server URL. Read on.

To set up our FHIR server URL, we will need our tenant ID. This is the ID of the specific Commure instance that you are on. You can find it at the beginning of the URL for your developer screen or by clicking on your user icon in your developer screen.

Run the Hello World SMART application

Now that you have your tenant ID, you can configure your env variables in the .env file.

First rename the .env.example file to .env and replace 0000 with your actual Tenant ID, and CLIENT_ID with the client ID you received after registering your application.

.env
1PORT=1234
2REACT_APP_CLIENT_ID=CLIENT_ID
3REACT_APP_FHIR_BASE_URL=https://api-0000.developer.commure.com/api/v1/r4

run your Hello World app with the start command:

1yarn start

Nice! You have an app that is successfully authenticating with your tenant on the Commure platform.

Let's get access to some data

Commure makes it easy to integrate with data coming directly from hospitals. When your app is live and in production, it will be dealing with real patient data.

For now, let's seed your tenant with some sample data.

1. From your Developer account, select "Tools > Data Library" in the side bar.
2. Select the checkbox to the left of "[Getting Started] Patient List". That is the bundle we will be loading into your platform. You can view the bundle by clicking on the eye icon in the same row.
3. Click "Submit" to post your bundle.

You should now have 3 sample patients to work with!

Where is that data?

Now that we've uploaded some data into our tenant - how can we double check what's in there?

1. From your Developer account, select "Tools > Resource Manager" in the side bar.
2. Use the dropdown menu or start typing to select Patient in the input box.
3. Populate the name field with the following patient name: Clyde Homenick.
4. Click "Search" to view the data.

Fetch a list of our Patients

Our data is present in our tenant and we have access to it. Let's have our app pull it in.

src/App.tsx
1import { AppHeader } from "@commure/components-core";
2import { CommureSmartApp, FhirDataQuery } from "@commure/components-data";
3import SMARTClient from "@commure/smart-core";
4import React from "react";
5import "./App.css";
6import { smartConfig } from "./config";
7
8const smartClient = new SMARTClient(smartConfig);
9
10function App() {
11  return (
12    <CommureSmartApp client={smartClient}>
13      <AppHeader appName="My First Commure App" fixedToTop />
14      <div className="hello-world-container">
15        {/* Adding a data query below here */}
16        <FhirDataQuery queryString="Patient">
17          {({ data, loading }) => {
18            if (loading) {
19              return "Loading...";
20            }
21            console.log(
22              `Loaded patient Bundle: ${JSON.stringify(data, null, 2)}`
23            );
24            return "Done loading!";
25          }}
26        </FhirDataQuery>
27      </div>
28    </CommureSmartApp>
29  );
30}
31
32export default App;

Look at your app and open your browser's console: you should see the Bundle of sample patients printed out!

You're now reading data from what could easily be put into production to interact with data from one of Commure's hospital partners.

Render a Commure component

As you can see, healthcare data shapes are complicated. You could easily spend half of your engineering time wrangling all the various data shapes into usable formats.

Commure provides a component library that makes working with these shapes much, much easier.

Let's render these patients using the PatientCard component.

src/App.tsx
1import { AppHeader, PatientCard } from "@commure/components-core";
2import { CommureSmartApp, FhirDataQuery } from "@commure/components-data";
3import { Bundle, Patient } from "@commure/fhir-types/r4/types";
4import SMARTClient from "@commure/smart-core";
5import React from "react";
6import "./App.css";
7import { smartConfig } from "./config";
8
9const smartClient = new SMARTClient(smartConfig);
10
11function App() {
12  return (
13    <CommureSmartApp client={smartClient}>
14      <AppHeader appName="My First Commure App" fixedToTop />
15      <div className="hello-world-container">
16        <FhirDataQuery queryString="Patient">
17          {({ data, loading }) => {
18            if (loading) {
19              return "Loading...";
20            }
21            if (!data) {
22              return "Error loading data!";
23            }
24            const entries = (data as Bundle).entry!;
25            if (!entries) {
26              return "Data is empty! (Forgot to import?)";
27            }
28            /* Rendering each of the patients below here */
29            const patients: Patient[] = entries.map(
30              value => value.resource as Patient
31            );
32            return (
33              <div>
34                {patients.map((patient, index) => (
35                  <PatientCard key={index} resource={patient} />
36                ))}
37              </div>
38            );
39          }}
40        </FhirDataQuery>
41      </div>
42    </CommureSmartApp>
43  );
44}
45
46export default App;

What's Next?

Now that you've seen the end to end flow, you're all set to start building your app!

If this is your first time here, we recommend you get a feel for the Commure Platform by stepping through building a more full-fledged application. Start with the introduction. Otherwise, here are some other useful tutorials:

• Read data
• Mutate data
• Use other pre-built components