Build a New Application

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

What we're going to do

By stepping through this short guide, we'll have:

  • A boilerplate React app ready to be iterated into your healthcare app idea
  • Worked through an example of fetching data from your Commure tenant
  • Worked through an example of using pieces of the Commure component library

Prerequisites

Set up the Commure SMART App boilerplate

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

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

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.

asd

Run the Hello World SMART application

Now that you have your tenant ID, run your Hello World app with these commands (replace TENANT_ID with your actual ID):

export REACT_APP_FHIR_BASE_URL=https://api-TENANT_ID.developer.commure.com/api/v1/r4
yarn start

asd

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 "Load Sample Data" 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

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 "Explore Data" 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 one of the following options: Clyde Homenick, Eduardo Barrera, or Kimi Mosciski
  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.

import { FhirDataQuery } from "@commure/components-data";
function App() {
return (
<CommureSmartApp client={smartClient}>
<AppHeader appName="My First Commure App" fixedToTop />
<div className="hello-world-container">
{/* Adding a data query below here */}
<FhirDataQuery queryString="Patient">
{({ data, loading }) => {
if (loading) {
return "Loading...";
}
console.log(`Loaded patient Bundle: ${JSON.stringify(data, null, 2)}`);
return "Done loading!";
}}
</FhirDataQuery>
</div>
</CommureSmartApp>
);
}

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

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.

import { PatientCard } from "@commure/components-core";
import { Bundle, Patient } from "@commure/fhir-types/r4/types";
function App() {
return (
<CommureSmartApp client={smartClient}>
<AppHeader appName="My First Commure App" fixedToTop />
<div className="hello-world-container">
<FhirDataQuery queryString="Patient">
{({ data, loading }) => {
if (loading) {
return "Loading...";
}
if (!data) {
return "Error loading data!";
}
/* Rendering each of the patients below here */
const patients: Patient[] = (data as Bundle).entry!.map(
value => value.resource as Patient
);
return (
<div>
{patients.map((patient, index) => (
<PatientCard key={index} resource={patient} />
))}
</div>
);
}}
</FhirDataQuery>
</div>
</CommureSmartApp>
);
}

What's Next?

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

Here are some things you might be wondering how to do next: