Affichage des métriques des périphériques IoT avec Kendo UI Builder

En utilisant un composant personnalisé et la propriété du modèle, nous allons explorer comment vous pouvez facilement interagir avec les périphériques IoT en utilisant Kendo UI Builder.

Dans ce blog suivant dans mon Kendo UI Builder comment faire série, nous allons étudier un exemple de composant personnalisé qui interagit avec un autre composant sur la page via la propriété du modèle. Plus précisément, le composant affichera une mesure à partir d'un périphérique IoT dans une pièce. Les données des différentes salles et appareils sont obtenues via un fournisseur de données REST.

Nous allons utiliser deux instances de ce composant sur une vue vide pour montrer la température et l'humidité dans la pièce. La pièce est sélectionnée à partir d'un composant de liste déroulante sur la même vue.

La vue contenant la liste déroulante et les deux composants personnalisés ressemble à ceci:

Cet exemple de composant est construit à partir de l'échantillon de base Plus tôt dans la série Si vous ne le connaissez pas, vous pouvez en lire plus à ce sujet ici .

Pour suivre, téléchargez le template samples zip de github ou clonez le référentiel, puis ouvrez le dossier components / custom-device-metrics-comp et suivez les mêmes étapes décrites dans ce post pour installer ce modèle dans votre application cible.

Requisites

Nous devons configurer quelques éléments:

1. Un serveur REST de test qui sert des métriques de périphérique pour plusieurs pièces
2. Un fournisseur de données au service REST
3. Une vue vide contenant une combobox pour sélectionner salle nous voulons des informations de

Nous allons tirer parti du serveur REST et des données fournisseur dans plusieurs autres échantillons de cette série, alors s'il vous plaît prendre les deux minutes qu'il faut pour le configurer.

Configuration du serveur REST (2 minutes)

Les métriques de l'appareil seront fournies par un serveur REST de test. La configuration est simple grâce à json-server, un serveur REST à codage nul:

1. Installation avec commande: npm install -g json-server ( cliquez ici pour plus d'informations )
   
2. Démarrez le serveur: json-server –watch dbIoT.json –port 3004 (ceci démarre le serveur avec l'ensemble de données dans le fichier dbIoT.json, disponible dans this github repo )
3. Vous pouvez vérifier l'accès en accédant à cette URL http: // localhost: 3004 / devices

Vous devriez obtenir une liste complète d'environ 20 enregistrements qui devraient ressembler à cet exemple d'enregistrement:

Configuration du fournisseur de données au service REST

1. Création d'une application Kendo UI Builder , enregistrez-le et quittez Kendo UI Builder
2. Copiez l'exemple de fichier Data Provider
   à partir de : https://github.com/thierryciot/kendoui-builder-template-samples/blob/master/DataProviders/IoT .json
   à : [your application name] meta dataProviders IoT.json

   Cela vous évitera de devoir configurer le fournisseur de données REST pour le service REST Devices installé à l'étape précédente.

   [19659013] Redémarrez Kendo UI Builder et vérifiez que le fournisseur de données IoT est répertorié. Lorsque vous modifiez la source de données Périphériques, vous devriez voir ceci:
   

   Configuration de la vue vide

   La vue vide est configurée avec une source de données à notre Suivez les étapes suivantes:

   • Dans votre application, créez une vue vide
   • Dans le panneau de droite, cliquez sur le bouton Modifier de la propriété Source de données de la vue. et créez une source de données comme ceci:
   • Dans la vue vide, dans une colonne de votre choix, ajoutez un composant combobox avec les propriétés suivantes: ] source de données "title =" source de données "/>

   Une fois cela fait, nous sommes prêts à créer des instances de notre composant métrique de périphérique et lier ces instances à un champ spécifique de l'enregistrement REST (une pièce avec périphérique métriques) via le modèle "DevicesModel."

   Comment définir un composant qui peut être lié à un champ dans ce modèle? s regardez comment nous faisons cela en programmant le fichier de définition du composant.

   Définition du composant

   Ouvrez les composants de fichier / custom-device-métriques-comp / custom-device-metrics-comp.json [19659003] Il contient les mêmes propriétés que l'échantillon de composant de base, donc ceux-ci devraient vous être familiers. Sinon, veuillez vous référer à ce billet de blog .

   Il y a deux nouvelles propriétés:

   01. "valeurPrimitive" : {

   02 "type" : "booléen"

   03. "par défaut" : true

   04. "caché" : true

   05. "ordre" : 3

   06. },

   07. "modèle" : {

   08. "type" : "chaîne de caractères"

   09. "titre" : "Modèle"

   10. "par défaut" : ""

   11. "editorType" : "modelName"

   12. "ordre" : 4

   13. }

   Dans ce post, nous nous concentrons sur le modèle . Nous allons entrer dans les détails de valuePrimitive dans le prochain blog lorsque nous écrivons un composant multi-valeurs.

   La propriété du modèle, et plus précisément l'éditeur modelName (property editorType) , fournit un moyen de sélectionner la source de données et le champ à lier à la variable de modèle EJS.

   Voici comment la propriété de modèle s'affiche au moment du design, dans le panneau de propriétés:

   

   Pour la première instance de mon composant de métrique de périphérique, j'ai sélectionné le modèle correspondant à ma source de données IoT Devices (DevicesModel), puis j'ai sélectionné le champ currentTemp pour indiquer que le composant Metric doit affiche la température actuelle de la pièce sélectionnée

   Pour la deuxième instance, j'ai simplement sélectionné le champ "hum" (Humidité):

   

   Maintenant, il serait opportun de l'essayer par vous-même: accédez à la vue vide créée précédemment et faites glisser deux instances du composant personnalisé dans deux colonnes distinctes Pour chacun d'eux, sélectionnez le modèle et l'une des métriques que vous aimez (comme VOC, CO2, ect …)

   Design-Time

   Comme nous l'avons fait dans ce post dans l'exemple custom-hello-world-comp nous définissons une icône utilisée dans la palette des composants (Panneau de gauche).

   Nous définissons également un modèle:

   < div >

   <%- metric %>: 12

   </ div >

   Ce modèle simplement montre l'étiquette de la métrique et une valeur codée en dur

   Run-Time

   Les modèles d'exécution sont également relativement simples

   Il y a deux choses principales dont nous devons nous occuper:

   1. Nous nous assurons que nous affichons l'étiquette pour Par exemple, nous utilisons la chaîne EJS <%-id%> pour faire référence à l'instance spécifique
   2. Nous référençons le champ approprié du modèle de données à l'aide de la chaîne EJS <%- model %> (la valeur de cette occurrence sera, pour les instances de composant , DevicesModel.currentTemp et DevicesModel.hum respectivement)

   Le code généré pour ceux-ci dépend du framework cible. Alors explorons chacun un peu plus.

   Angular

   Le modèle ressemble à ceci:

   1. < div class = "deviceMetric" [19659067]>

   2. [ span classe = "deviceMetricLabel" > {{$ config.components. <%-id%> .metric}} </ trav >

   3. [ span classe = "deviceMetricSeparator" > </ étendue >

   4. [ span classe = "deviceMetricValue" > {{$ dataModels. <%- model %>}} </ trav >

   5. </ div >

   Voir les composants de fichier / custom-device-metrics-comp / angular / template.html.ejs [19659003] Le fichier dactylographié du composant de base de code généré, par exemple, devices.view.base.component.ts, a un littéral d'objet $ dataModels avec une référence à un objet contenant les valeurs de champ que nous voulons rendre dans instances de composant

   1. public $ dataModels: any = {

   2. DevicesModel: nouveau IoTDevice ()

   3. };

   Et voici la définition de IoTDevice: [19659020] 01. classe d'exportation IoTDevice

   02. {

   03. identifiant public: number;

   04. pièce publique: string;

   05. public setTemp: number;

   06. public currentTemp: number;

   07. public hum: numéro;

   08. public co2: numéro;

   09. public voc: numéro;

   10. }