How to Create a Live Service Healthcare App with Kinvey

How to Create a Live Service Healthcare App with Kinvey

Posted on November 12, 2018 0 Comments
How to Create a Live Service Healthcare App with Kinvey_870x450

Learn how to rapidly develop an app that securely connects to a backend and receives live updates with Progress Kinvey and Live Service.

I recently built a new app using Kinvey Live Service and I wanted to share my experience. This app, the IVy Intravenous Manager, helps nurses manage IVs. When an IV is empty, the IVy app pushes a message to the assigned nurse. Each app user is notified when new patient/IV is available through the Live Service. Nurses can scan a QR code to “claim” an IV or patient. This blog post explains how the app was created in just minutes with the Progress Kinvey high productivity platform.

Getting Started

To get started with the environmental setup, follow the steps here.

For a shorter route, use Kinvey Studio.

Once the Kinvey configuration is done, you should be able to Enable Live Service within your Kinvey app.

Enable Kinvey Live Service

If you’re unfamiliar with Kinvey Live Service, you can access the documentation here.

Adding Barcode Scanner

You’ll need to install Barcode Scanner in your app to scan an IV and enter the patient’s pertinent information.

Add Barcode Scanner

After adding the plugin, follow these steps so you’ll be able to get the scanner on both an Android and an iOS emulator.

import { BarcodeScanner } from 'nativescript-barcodescanner';
import { registerElement } from "nativescript-angular/element-registry";
registerElement("BarcodeScanner", () => require("nativescript-barcodescanner").BarcodeScannerView);

This should be added to the module.ts, and in the component you can call Barcode Scanner with the following code:

Call Barcode Scanner

Because it’s a little bit tricky, you have to Add the Android scan sample and make the embedded iOS sample conditional so that it can work on both iOS and Android.

Include the following code in your HTML file for Barcode Scanner. It will open a new camera window.

Barcode Scanner HTML

You should now be all set with Barcode Scanner. Here are screenshots of what it should look like on both iOS and Android:

Screenshot iOSScreenshot Android

When the user presses the submit button, it should subscribe to the messaging for Live Service and for that specific patient, then it will show an immediate alert on the device as to which patient detail is added. After that, you’ll be able to see that patient’s detail on the table of the main screen page.

When the user submits the details, the data is saved to the Kinvey datastore with this code:

Save to Kinvey DataStore

For the segmented bar, you can use this HTML code snippet for different views:

<SegmentedBar [items]="items" (selectedIndexChange)="onSelectedIndexChange($event)" class="m-5" ></SegmentedBar>
<GridLayout [visibility]="selectedIndex === 0 ? 'visible' : 'collapsed'" backgroundColor="white">
    <Label [text]="'The new selectedIndex is: ' + selectedIndex" class="m-15 h3 p-5 text-center"></Label>
<GridLayout rows="*" [visibility]="selectedIndex === 1 ? 'visible' : 'collapsed'" backgroundColor="green">
    <Label [text]="'The new selectedIndex is: ' + selectedIndex" class="m-15 h3 p-5 text-center" color="white"></Label>
<GridLayout rows="*" [visibility]="selectedIndex === 2 ? 'visible' : 'collapsed'" backgroundColor="red">
    <Label [text]="'The new selectedIndex is: ' + selectedIndex" class="m-15 h3 p-5 text-center" color="white"></Label>

And you can follow this TypeScript code to write a title on the segmented bar:

Title on Segmented Bar

When you navigate to the segmented page “Patients,” IVy displays a list of the patients as below:

List of Patients

For this list in the app, you must first register for the Live Service. You can subscribe to messages from the collection. In this app, we want to use a snippet (as per my GitHub code) where we can show a dialog box when the patient’s remaining IV time ends.

This is the dialog box the user sees when a patient is ready for an IV change:

Adding Dialog Box

Adding More Functionality

For a status update that gives the minimum time before the next IV change is required, we can add a function to the JavaScript:

min = Math.min.apply(Math,{return item.time;}));

Here we have a table of the patient name and details. To build that we can use “RadListView” as below:

<RadListView [items]="contactName" backgroundColor="transparent" height="500">
<ng-template let-item="item" let-i="index">
  <GridLayout columns="*, auto, auto" rows="*" class="table table-standings">
  <Label text="{{item.test}}" textWrap="true" row="0" col="0" class="td team"></Label>
<Label text="{{item.r_number}}" textWrap="true" row="0" col="1" class="td Z"></Label>
  <Label text="{{item.time}}" textWrap="true" row="0" col="2" class="td V"></Label>
<ListViewGridLayout tkListViewLayout itemHeight="34" scrollDirection="Vertical" spanCount="1"></ListViewGridLayout>

That’s All There is to It

Using Live Service in a Kinvey app is easy, and with minimal design work we were able to develop a production-ready app. Kinvey is a powerful high productivity tool that accelerates development and significantly reduces the time it takes to build an app. With just a little JavaScript experience, building this cross-platform app, complete with a secure backend, took just minutes.

Give Kinvey a try for yourself. Sign up for the free developer edition.

For this project’s full source code, click here.

Please post a comment if you have any questions or need help. 


The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.


Comments are disabled in preview mode.

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation