Applications Quick Corticon.js avec React Native

React Native est livré avec de superbes fonctionnalités et s'intègre parfaitement avec la bibliothèque JavaScript Corticon.js. Créer une nouvelle application mobile à partir de zéro avec un service de décision est à la fois intuitif et rapide.

Que vous décidiez si Corticon.js convient bien à votre produit ou si vous cherchez Pour utiliser Corticon d'une nouvelle manière, vous pouvez être chargé d'écrire une application rapide de preuve de concept.

La première décision à prendre est le type d'application. Votre première pensée pourrait être d'écrire une application Web. Après tout, Corticon.js est une bibliothèque JavaScript. Mais qu'en est-il des autres possibilités? Et une application mobile?

Il peut sembler décourageant au début d'envisager d'écrire une application mobile comme preuve de concept. Surtout si l'on considère qu'il est assez courant pour quelqu'un de votre équipe d'avoir un certain niveau d'expérience JavaScript, mais beaucoup moins courant d'avoir quelqu'un d'expérience dans le développement Android et iOS.

Et c'est là que React Native brille vraiment. Pour un développeur Full Stack comme moi qui passe tout son temps dans le pays JavaScript, pouvoir utiliser JavaScript au lieu de Java et Swift rend vraiment la tâche beaucoup plus gérable. Non seulement vous n'avez pas besoin d'apprendre ou de vous perfectionner sur le développement Java Android ou Swift iOS, mais vous n'avez pas à passer du temps à configurer les deux environnements de développement. Et vous obtenez à la fois une application Android et iOS native sans vous soucier de chacune d'entre elles individuellement.

L'intégration de Corticon.js en tant que service de décision local est également extrêmement simple. Corticon.js Studio vous permet d'exporter votre service de décision sous la forme d'un fichier JavaScript unique. Donc, tout ce que vous avez à faire pour ajouter votre service de décision local est de l'exiger comme ceci:

 const myDecisionService = require ('./ decisionServiceBundle.js') 

Mais avant de passer à plus de détails sur la façon d'intégrer Corticon dans votre nouvelle application React Native, je voudrais parler de certains des avantages intéressants de React Native.

React

Il va sans dire que React.js est le fondement de React Native et est l'un des trois plus populaires Framework JavaScript (aux côtés d'Angular et Vue), React possède toutes les qualités que vous pourriez espérer. Il gère la mise à jour de votre vue de manière intuitive et efficace sans imposer une lourde charge sur la façon dont vous concevez et organisez votre application. Je n'entrerai pas trop dans React en tant que framework JavaScript, mais j'aimerais souligner ce qui m'a marqué lorsque je travaillais avec React.

D'une part, React est basé sur des composants, chaque composant ayant ses propres fichier. Un seul fichier, ce qui signifie que le balisage, JavaScript et CSS sont tous au même endroit. Et bien que cela puisse sembler être une recette pour du code illisible, en pratique, ne pas avoir trois fichiers séparés pour chaque composant, chacun avec quelques blocs de code, est un avantage appréciable, en particulier dans le cas d'applications de démonstration simples.

Aussi, apprendre de nouvelles la syntaxe et les bizarreries d'un framework est généralement la moitié du défi. Cependant, personnellement, j'ai trouvé la syntaxe de React beaucoup plus intuitive que celle d'Angular et d'autres frameworks JavaScript. Il y avait toujours une solution et une syntaxe élégantes pour tous les défis courants qui se posent dans une application simple.

Voulez-vous appliquer un style conditionnel à un balisage?

 
 
   < Afficher   style = {someCondtion? styleA: styleB} />   
 

Vous souhaitez masquer une partie de votre balisage en fonction de certains critères?

 
 
   {someCondition && < Text > Your Markup </ [19659016] Texte >}   
 

Et bien que la plupart des frameworks fournissent un moyen de faire la plupart des choses, les deux exemples ci-dessus sont très lisibles et intuitifs. En fait, lorsque j'ai commencé à apprendre le développement Web, j'ai essayé exactement ce que React vous permettait de faire et j'ai été déçu de constater que vous ne pouviez pas utiliser de conditions pour styliser le balisage avec du JavaScript / HTML vanille.

Configuration rapide et sortie de la fonctionnalité Box

Si vous avez déjà installé Node, la configuration de React Native lui-même n'est en réalité qu'une commande npm pour télécharger l'outil de ligne de commande.

La plupart du temps de configuration réel consiste à obtenir un émulateur pour Android ou iOS. vous pouvez consulter votre candidature. Certes, il peut y avoir des problèmes (je regarde votre accord de licence Android SDK) pour que cela fonctionne sur votre machine, mais la même configuration serait nécessaire si vous écriviez directement du code Android ou iOS.

Dans l'ensemble, j'avais l'application de démarrage fournie avec React Native et fonctionnant dans un émulateur Android en quelques heures. Lancer npx react-native init AwesomeProject configurera le répertoire de votre projet et inclura un certain nombre d'utilitaires utiles. Cela inclut Watchman qui déclenche les reconstructions lorsque vous modifiez un fichier de projet, ce qui vous permet de gagner du temps!

Intégration de Corticon dans votre nouvelle application mobile brillante

Très bien, voici le moment que vous attendiez. Comment appeler et gérer exactement la réponse du service de décision?

Appel du service de décision

L'appel du service de décision depuis votre application React Native est également simple. Passez simplement votre charge utile JSON à la méthode 'execute' sur l'objet Decision Service:

 
 
   myDecisionService.execute (payload) 

Formation de la charge utile

La charge utile JSON contient tous les objets que le service de décision utilisera pour déterminer les règles à exécuter. Le moyen le plus simple de voir comment vous devez former vos charges utiles consiste à utiliser Corticon.js Studio.

Dans votre projet Corticon.js Studio, commencez par un projet nouveau ou existant fichier de test. Dans le panneau de saisie, vous pouvez former votre charge utile en faisant glisser et en déposant des éléments de votre vocabulaire de règles. Une fois que vous êtes prêt, vous pouvez exporter votre charge utile au format JSON en cliquant avec le bouton droit sur votre entrée et en sélectionnant «  Exporter JSON ''. Cela ajoutera tous les attributs et métadonnées nécessaires pour vous!

Un exemple de charge utile ressemble à ceci:

 01.  { 
  02.   "__ metadataRoot": {},   
  03.   "Objets": [{  
  04.   "Nom": "Un nom"   
  05.   "Objet imbriqué": {  
  06.   "prix": 53900,   
  07.   "nom": "BMW Série 5",   
  08.   "__ metadata": {  
  09.   "# type": "Cars.Car",   
  10.   "# id": "Cars.Car_id_1"   
  11.  },   
  12.   "fabricant": "BMW"   
  13.  },   
  14.   "__ metadata": {  
  15.   "# type": "Utilisateur",   
  16.   "# id": "User_id_1"   
  17.  },   



  


               




  18.   "birthDate": "1990-12-25"   
  19.  }]   
  20. } 

Traitement de la réponse

Vous avez formé votre charge utile et l'avez envoyée à votre service de décision. Vous devez maintenant réfléchir à la manière dont vous souhaitez gérer la réponse. Tout d'abord, il y a une grande décision à prendre: voulez-vous gérer la réponse de manière synchrone ou asynchrone? Puisqu'il s'agit d'une bibliothèque Javascript locale, le temps de réponse doit être minimal. Donc, votre première pensée pourrait être que Synchronously est clairement le gagnant.

Cependant, l'écriture de votre gestionnaire de réponses de manière asynchrone ouvre la porte à l'hébergement de votre Decision Service dans le Cloud, par exemple dans AWS Lambda ou Azure pour n'en nommer que quelques-uns. De plus, vous ne savez jamais quelle sera la taille de votre jeu de règles, et faire attendre le thread JavaScript sur un appel synchrone du service de décision pourrait revenir vous mordre.

Dans les deux cas, voici le code pour les deux. J'ai séparé le gestionnaire de réponse en sa propre fonction.

 
 
   // Response Handler  
   let responseHandler = (result) = > { 
    // Le code d'état du service de décision. Vérifiez toujours si status == 'success'   
    if   (result.status ==  'success' ) {  
    // Récupère tous les objets d'un certain type   
    let cars = result.Objects. filter (object => object .__ metadata [ "# type" ] ==  'Cars.Car' );   
  
    // Ou peut-être trouver un objet spécifique   
    let car = result.Objects.find (objects => object .__ metadata [ "# type" ] ==  'Cars.Car' )   
  
    // Vérifiez certaines conditions   
    if   (cars.length) {  
    // Ensuite, mettez à jour l'état ou les accessoires de votre application React Native pour modifier le rendu   
    this  .setState ({numCars: cars .length});   
   }   
  
   } [19659016] else   { // il y a une erreur   
  
    // gérer l'erreur   [19659002]    console.log (description.du résultat);   
   }   
  }  
  
   // Synchronous Call  
   responseHandler (decisionService.execute (corticonPayload));  
  
   // Appel asynchrone  
   let result =  new   Promise ((résoudre, rejeter) => { 
    resolution (decisionService. execute (corticonPayload));   
  })  
   result.then (responseHandler); 

Mise à jour de vos vues dans React Natif

Nous avons donc vu comment appeler et gérer la réponse de votre service de décision. Mais il existe plusieurs façons de mettre à jour votre application native React. Je voudrais terminer cet article avec une section rapide sur quelques façons de mettre à jour vos vues en fonction des résultats de votre service de décision.

État

Vous pouvez décider qu'il est logique que certains composants maintiennent leur propre «état» et l'état peut être utilisé dans votre vue. L'état est géré par React Native et est livré avec des setters et des getters (setState et getState). Votre application React Native rendra automatiquement à nouveau tout composant dont l'état est modifié via setState. Cela signifie que dans le responseHandler ci-dessus, 'this.setState ({numCars: cars.length})' entraînerait le nouveau rendu du composant dans lequel vous avez appelé le service de décision.

Props

Les accessoires sont transmis à votre composant depuis un composant parent. Ils permettent essentiellement aux données de filtrer à partir du niveau supérieur de l'application. Si plusieurs composants doivent être restitués en fonction de votre service de décision, une façon d'y parvenir est d'appeler votre service de décision dans un composant de niveau supérieur et d'utiliser des accessoires pour transmettre les données.

Une autre utilisation intéressante des Props est de passer une fonction à l'enfant qui met à jour l'état du parent. Cela peut être utile si vous souhaitez appeler votre service de décision dans un composant enfant, mais devez mettre à jour l'état du parent. Transmettez simplement une fonction au composant enfant et appelez-le partout où vous gérez la réponse de votre service de décision.

Emballer les choses

L'intégration de votre service de décision dans une application mobile avec React Native est vraiment assez simplifiée. Génération de votre charge utile, appel et gestion de la réponse, et mise à jour de la vue de vos applications – tout est fait une fois en JavaScript, sans avoir besoin de se pencher sur les langages de programmation Java Android ou Swift iOS. Cela, combiné à la facilité d'utilisation générale de React Native, signifie que la création de votre première application React Native et de Decision Service pourrait ne prendre que quelques jours!