Fermer

novembre 12, 2018

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.

 Activer le service Kinvey Live "title =" Activer le service Kinvey Live "/></p data-recalc-dims=

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.

 Ajouter un scanner de codes à barres "title =" Ajouter un scanner de codes à barres "/></p data-recalc-dims=

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:

 Appeler Scanner de code à barres "title =" Appeler Scanner de code à barres "/ ></p data-recalc-dims=

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.

 Scanner de codes à barres HTML "title =" Scanner de codes à barres HTML "/></p data-recalc-dims=

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:

 Capture d'écran iOS "title =" Capture d'écran iOS "data-method =" ResizeFitToAreaArguments "data-customsizemethodproperties =" {"MaxWidth": "", "MaxHeight": "550", "ScaleUp": false, "Qualité": "Elevé"} "/> <img decoding=

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:

. Save to Kinvey DataStore "title =" Enregistrer dans le Kinvey DataStore "/></p data-recalc-dims=

Pour la barre segmentée, vous pouvez utiliser cet extrait de code HTML pour différentes vues:

Et vous pouvez suivre ce code de TypeScript pour écrire un titre sur la barre segmentée:

 Titre sur la barre segmentée "title =" Titre sur la barre segmentée "/></p data-recalc-dims=

Lorsque vous accédez à la page segmentée« Patients », IVy affiche un liste des patients comme suit:

 Liste des patients "title =" Liste des patients "data-method =" ResizeFitToAreaArguments "data-customsizemethodproperties =" {"MaxWidth": "", "MaxHeight": "550 "," ScaleUp ": false," Qualité ":" Elevé "}" /></p data-recalc-dims=

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:

 Boîte de dialogue complémentaire "title =" Boîte de dialogue complémentaire "data-method =" ResizeFitToAreaArguments "data-customsizemethodproperties =" {"Largeur maximale": "," MaxHeight ":" 550 "," ScaleUp ": false," Qualité ":" Elevé "}" /></p data-recalc-dims=

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: