Comment créer une application Live Service Healthcare avec Kinvey
Apprenez à développer rapidement une application qui se connecte en toute sécurité à un serveur et reçoit des mises à jour en direct avec Progress Kinvey et Live Service.
J'ai récemment créé une nouvelle application à l'aide de Kinvey Live Service et je voulais partager mon expérience. Cette application, IVy Intravenous Manager, aide les infirmières à gérer les intraveineuses. Lorsqu'un IV est vide, l'application IVy envoie un message à l'infirmière assignée. Chaque utilisateur de l'application est averti lorsqu'un nouveau patient / IV est disponible via le service Live. Les infirmières peuvent scanner un code QR pour «réclamer» une intraveineuse ou un patient. Ce billet de blog explique comment l'application a été créée en quelques minutes à l'aide de la plate-forme haute productivité Progress Kinvey .
Pour commencer
Pour commencer à utiliser la configuration environnementale, suivez les étapes ici .
Pour un itinéraire plus court, utilisez Kinvey Studio .
Une fois la configuration de Kinvey terminée, vous devriez pouvoir activer le service en direct dans votre application Kinvey.
Si vous ne connaissez pas bien le service Kinvey Live, vous pouvez accéder à la documentation ici .
Ajout du scanner de codes à barres
Vous devez installer le scanner de codes à barres dans votre application pour scanner un IV et saisir les informations pertinentes du patient.
Après avoir ajouté le plugin, suivez ces étapes afin que vous puissiez obtenir le scanner à la fois sur un Androi d et un émulateur iOS.
importation {BarcodeScanner} de
'nativescript-barcodescanner'
;
import {registerElement} de
"nativescript-angular / element-registry" [19659015];
registerElement (
"BarcodeScanner"
() => require (
"nativescript-barcodescanner"
). BarcodeScannerView); 19659024] Ceci devrait être ajouté à
module.ts
et dans le composant, vous pouvez appeler Scanner de code à barres avec le code suivant:
Parce que c'est un peu compliqué, vous devez ajouter l'échantillon d'analyse Android et conditionner l'échantillon iOS intégré afin qu'il puisse fonctionner à la fois sur iOS et Android.
Inclure le code suivant dans votre fichier HTML pour le scanner de codes à barres. Il ouvrira une nouvelle fenêtre de l'appareil photo.
Vous devriez maintenant être tous configurés avec le scanner de codes à barres. Voici des captures d'écran de ce à quoi cela devrait ressembler sous iOS et Android:
Lorsque l'utilisateur appuie sur le bouton d'envoi, il doit souscrire à la messagerie pour Live Service et pour ce patient spécifique, une alerte immédiate apparaît sur l’appareil pour indiquer les détails du patient à ajouter. Après cela, vous pourrez voir les détails de ce patient sur le tableau de la page de l'écran principal.
Lorsque l'utilisateur soumet les détails, les données sont enregistrées dans le magasin de données Kinvey avec le code suivant:
Pour la barre segmentée, vous pouvez utiliser cet extrait de code HTML pour différentes vues:
<
SegmentedBar
[items] =" items "(selectedIndexChange) =" onSelectedIndexChange ($ event) "
class
=
" m-5 "
> </
SegmentedBar
>
[19659000]
[19659] <
GridLayout
[visibility] = "selectedIndex === 0? 'visible': 'collapsed' "
backgroundColor
=
" blanc "
>
</
GridLayout
>
19659067] rows
=
"*"
[visibility] = "selectedIndex === 1? 'visible': 'collapsed' "
backgroundColor
=
" vert "
>
</
GridLayout
>
19659002]
<
GridLayout
rows
=
"*"
[visibility] = "selectedIndex === 2? 'visible': 'collapsed' "
backgroundColor
=
" rouge "
>
</
GridLayout
>
Et vous pouvez suivre ce code de TypeScript pour écrire un titre sur la barre segmentée:
Lorsque vous accédez à la page segmentée« Patients », IVy affiche un liste des patients comme suit:
Pour cette liste dans l'application, vous devez d'abord régis pour le service en direct. Vous pouvez vous abonner aux messages de la collection. Dans cette application, nous souhaitons utiliser un extrait de code (d'après mon code GitHub ) dans lequel nous pouvons afficher une boîte de dialogue à la fin du temps IV restant du patient.
Il s'agit de la boîte de dialogue l'utilisateur voit quand un patient est prêt pour un changement de voie intraveineuse:
Ajout de fonctionnalités supplémentaires
Pour une mise à jour de statut indiquant le délai minimal requis avant la prochaine modification IV, nous pouvons ajouter une fonction au JavaScript:
min = Math.min.apply (Math,
this
.contactName.map (
function
(item) {
return [19659041] item.time;}));
Nous avons ici un tableau indiquant le nom du patient et ses détails. Pour cela, vous pouvez utiliser «RadListView» comme suit:
<RadListView [items] = [19659014] "contactName"
backgroundColor = [19659014] "transparent"
height =
"500"
>
<1945-9018]