How to Create a Live Service Healthcare App with Kinvey

How to Create a Live Service Healthcare App with Kinvey

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>
 
<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>
 
<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>
</GridLayout>

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,this.contactName.map(function(item){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>
  </GridLayout>
  </ng-template>
<ListViewGridLayout tkListViewLayout itemHeight="34" scrollDirection="Vertical" spanCount="1"></ListViewGridLayout>
</RadListView>

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. 

Aakash Chauhan

Aakash Chauhan

Aakash Chauhan is currently working as a Developer Marketing Intern at Progress. He is passionate about building awesome mobile applications and web apps. He has work experience developing Android mobile apps and Angular web apps.

Comments
Comments are disabled in preview mode.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
New_Mobile_Dev_Ebook_Progress_Website_Thumbail
The New Mobile Development Landscape
Download Whitepaper
 
IDC Spotlight Sitefinity Thumbnail
Choosing the Right Digital Experience Platform to Improve Business Outcomes
Download Whitepaper
 
TheFastestWayToBuildMobileAppsArtboard-2
The Fastest Way to Build Mobile Apps With Cloud Data
Watch Webinar