How to Build a Mobile App for a Medical Device with the LifeOmic Platform

You’ve built the device, and the firmware is testing great. Now you need two things:

• A trusted platform to securely save data
• A companion mobile app for users to manage your device

What’d be great is if there was a solution that covered both of these with the least amount of time and effort possible. 🔥

This article covers building your own version of LifeOmic’s device companion app, including a custom screen for your device. The mobile app is built on top of the LifeOmic Platform which provides secure data storage and data analysis capabilities.

Branded mobile apps

LifeOmic offers a branded mobile experience. This allows you to easily launch a mobile app based on an already developed, configurable app. Your app is made your own with your unique:​

• Apple and Google Play app store listings
• App icon
• Splash screen
• Theme (colors, fonts, sizing, etc.) throughout the app
• Configured content (pillars, trackers, tiles, etc. — all content within the app)​
• Completely custom, native screens

The branded mobile app isolates all of its components into the @lifeomic/react-native-sdk. In addition to giving you a head start to launching an app, this SDK allows you to develop custom, native screens inside your branded mobile app.​

I’m going to walk through developing a custom screen.​

Setting up your app repository and running locally

​Alongside the react-native SDK, there is also a @lifeomic/react-native-starter. This is a great starting point to fork or copy. Or you can just clone the repo to quickly get it running locally:​

git clone git@github.com:lifeomic/react-native-starter.git
cd react-native-starter
yarn install
bundle install && cd ios && bundle exec pod install && cd ../
yarn start​

Now just type i or a to run on either platform (iOS or Android). With the app running locally, I can login and see the home screen:

Quick intro on app tiles

App tiles are the full-width buttons with chevrons at the bottom of the app preview in this screenshot:

You configure app tiles with the app builder (also shown above). The app builder allows you to configure app tiles that take the user to any of the following:

• An authenticated web view, pre-built by LifeOmic, like the BMR Calculator in the screenshot above
• An authenticated custom website, built by you, which can query and save data back to the platform
• An unauthenticated website, typically used for informational/resource purposes
• A custom, native screen component​

We’re focused on the last bullet point: a custom, native screen component.

Configuring an app tile to launch a custom screen​

First, I create an app tile resource and give it a URL like <bundleId>://<screen-id>.​ For example: com.lifeomic.mobile-example://device-config.

Next, I configure the mobile app home screen to include that app tile.

Now, I reload the home screen in the app and verify it works as expected.​

Perfect, that error message is expected because we haven’t configured the custom screen against the app tile URL yet. Let’s wire up a hello-world like device screen just to verify that linkage works.​

Screen component:

import React, { useCallback, useState } from 'react';
import { View } from 'react-native';
import { Button, Text } from 'react-native-paper';

export function DeviceScreen() {
  const [dataSaved, setDataSaved] = useState(false);
  const saveDeviceData = useCallback(() => {
    setDataSaved(true);
  }, []);
  return (
    <View style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      {dataSaved
        ? <Text>Data saved!</Text>
        : <Button onPress={saveDeviceData}>Sync Device Data</Button>
      }
    </View>
  );
}

Screen configuration here:

function App() {
  return (
    <DeveloperConfigProvider
      developerConfig={{
        appTileScreens: {
          'com.lifeomic.mobile-example://device-config': DeviceScreen,
        },
      }}
    >
      <RootProviders authConfig={authConfig}>
        <RootStack />
      </RootProviders>
    </DeveloperConfigProvider>
  );
}

And now you have your own screen running in the app:

Now you can do whatever you need to do. Maybe connect to your device over Bluetooth, or some other protocol, and receive data? There are great libraries and articles out there for this.

As far as saving the data, make sure to check out FhirExampleScreen.tsx. It’s an example custom app tile screen that demonstrates how to securely save FHIR data to the LifeOmic Platform. Let’s update our device config screen to save example device data:

import React, { useCallback } from 'react';
import { View } from 'react-native';
import { Button, ActivityIndicator } from 'react-native-paper';
import { useFhirClient } from '@lifeomic/react-native-sdk';

export function DeviceScreen() {
  const { useCreateResourceMutation } = useFhirClient();
  const upsertMutation = useCreateResourceMutation();

  const saveDeviceData = useCallback(async () => {
    const exampleDeviceValue = 7;
    const exampleDeviceId = 'abc123';
    const observation: fhir3.Observation = {
      resourceType: 'Observation',
      status: 'final',
      code: {
        coding: [
          {
            system: 'http://my-device-company.org',
            code: '1234',
            display: 'Device value X',
          },
        ],
      },
      valueQuantity: {
        value: exampleDeviceValue,
      },

      // NOTE: while the LifeOmic Platform account, project, and patient are
      // automatically populated by useFhirClient, this `device` prop ties
      // the record to the device for data analysis. This way, whether you're 
      // viewing data for the user/patient or device, this record is included.
      device: {
        reference: `Device/${exampleDeviceId}`
      },
    };
    const savedObservation = await upsertMutation?.mutateAsync(observation);
    console.warn('save result', savedObservation);
  }, []);

  return (
    <View style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      {upsertMutation.isLoading
        ? <ActivityIndicator />
        : <Button onPress={saveDeviceData}>Sync Device Data</Button>
      }
    </View>
  );
}​

And now we’ve got data saving:

What’s next?

From this point, here are some other things you can do:

• Utilize the built-in “My Data” app tile, so you don’t have to write code for fetching data, displaying charts, etc.
• Analyze the data via Subject Viewer or Jupyter Notebooks
• Save device diagnostics data and alerting to assist with troubleshooting
• Utilize the LifeOmic API for device firmware updates
• Build and launch an intro Lifeology course on the app’s first launch
• Create daily tasks for your users via programs (think educational content like gradual device usage training)
• Allow users to sync wearable data to be charted alongside your device data

Contact LifeOmic when you’re ready to get started. We can set you up with your own trial LifeOmic Platform account, OAuth app client ID, and branded device companion app.