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.
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.
If you’re unfamiliar with Kinvey Live Service, you can access the documentation here.
You’ll need to install Barcode Scanner in your app to scan an IV and enter the patient’s pertinent information.
After adding the plugin, follow these steps so you’ll be able to get the scanner on both an Android and an iOS emulator.
This should be added to the
module.ts, and in the component you can call Barcode Scanner with the following code:
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.
You should now be all set with Barcode Scanner. Here are screenshots of what it should look like on both iOS and 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:
For the segmented bar, you can use this HTML code snippet for different views:
And you can follow this TypeScript code to write a title on the segmented bar:
When you navigate to the segmented page “Patients,” IVy displays a list of the patients as below:
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:
Here we have a table of the patient name and details. To build that we can use “RadListView” as below:
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.
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.
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You have the right to request deletion of your Personal Information at any time.
You can also ask us not to pass your Personal Information to third parties here: Do Not Sell My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More