![\"License\"](\"http://img.shields.io/:license-mit-blue.svg?style=flat-square\")
\n\nAfin de permettre aux ingénieurs de pouvoir développer leurs propres applications en ligne, TriAzur met à disposition le kit de développement triazur-webapp-kit-serverless.
\n
\n\nCe projet vous permet de créer et de publier vos propres applications de ligne et de les proposer dans la marketplace de TriAzur.
\n
Les prérequis suivants doivent être installé:
\ntriazur-webapp-kit-serverless est écrit en React.js qui lui même nécessite Node.js. Node.js est un environnement d'exécution JavaScript installable partout, qui permet d'écrire n'importe quel type de programme en JavaScript : outil en ligne de commande, serveur, application desktop, internet des objets (IoT).
\nPour installer Node.js, allez sur **https://nodejs.org/fr/download/** puis suivez les instructions.
\nAfin de vérifier que Node.js a été bien installé, vous pouvez utiliser Invite de Commandes (cmd.exe sur Windows), et tapez la commande node -v afin de vérifier que vous n'avez pas de message d'erreur et que la version de Node est supérieur à la version 6.
$ node -v\nv10.3.0Node.js est installé avec npm est le gestionnaire de modules de Node. Afin de vérifier que npm est bien installé et que la version de Node est supérieur à la version 5, tapez la commande npm -v :
$ npm -v\n6.9.0Git est un logiciel de gestion de versions, il permet de versionner, d'enregistrer et de rendre open-source du code. Pour l'installer: **https://git-scm.com/downloads**.
\nDe même, pour vérifier que l'installation c'est bien déroulé, taper la commande git version:
$ git version\ngit version 2.21.0.windows.1Les sites Github et GitLab utilisent Git pour permettre aux utilisateurs de pouvoir stocker leurs codes et de le partager.
\nLe code peut être stocké de manière publique, on parle alors d'Open Source, où de manière privée.
\nNous présenterons GitLab qui a l'avantage de pouvoir stocker gratuitement une nombre de projet privé illimité.
\nPour clea il suffit de créer un compte sur GitLab à l'adresse suivante: https://gitlab.com/users/sign_in
\nEnsuite nous allons créer un nouveau projet que nous nommons: my-first-app.
\nNous devons ensuite configurer Git pour spécifier le compte GitLab avec lequel il doit ser synchroniser, pour cela il suffit d'indiquer notre username et notre email
\nAfin de pouvoir développer son application, le plus simple est d'utiliser VSCode qui est un éditeur de code cross-platform, open-source et gratuit supportant une dizaine de langages.
\nPour l'installer: **https://code.visualstudio.com/Download**.
\nAfin de créer notre première application, commençons par cloner triazur-webapp-kit-serverless grâce à git dans le repertoire ou nous souhaitons :
\n$ git clone https://gitlab.com/triazur/triazur-webapp-kit-serverless.git\nCloning into 'triazur-webapp-kit-serverless'...\nremote: Enumerating objects: 91, done.\nremote: Counting objects: 100% (91/91), done.\nremote: Compressing objects: 100% (76/76), done.\nremote: Total 91 (delta 13), reused 0 (delta 0)\nUnpacking objects: 100% (91/91), done.Une fois le clonage finalisé, vous pouvez renommer le dossier triazur-webapp-kit-serverless comme vous le souhaitez, ici nous l'appelerons my-first-app:
\nPuis, entrez dans votre dossier, lancez l'installation des modules Node.js via la commande npm install et enfin démarrez l'application avec npm start:
$ cd ./my-first-app\n$ npm install\n$ npm startNotez que notre application a dû s'ouvrir automatiquement dans notre navigateur (si ce n'est pas le cas, ouvrez un nouvel onglet dans votre navigateur et saisissez l'URL indiquée par la commande dans le terminal, normalement http://localhost:3000/ ).
\nCette application permet de calculer la surface d'un rectangle ainsi que son inertie suivant X.
\nA présent, nous souhaitons pouvoir également calculer l'inertie du rectangle suivant Y.
\nAfin de modifier notre application, allez dans le dossier src.\nOn y trouve le point d’entrée de l’application src/index.js ainsi que le composant React.js contenant notre application à savoir src/MyApp.jsx.
Cependant afin de rajouter notre calcul, seul les quatres fichiers suivant nous intéressent:
\ncalculations.js, est le fichier qui contient nos fonctions de calculs, par exemple la fonction permetant de calculer la surface du rectangleInputs.jsx, est le fichier qui affiche nos inputs tels que la hauteur où la largeur du rectangleOutputs.jsx, est le fichier qui affiche nos inputs tels que la surface où l'inertie du rectangleinitialData.js, est le fichier qui contient les valeurs initiales, les descriptifs de inputs et des outputs ainsi que les unités.Ce fichier contient donc les données que l'on souhaite afficher et calculer. Chaque élément que l'on souhaite afficher doit avoir la structure suivante:
\nA: { // Indice de l'élément à afficher\n name: 'A', // Nom de l'élément à afficher, doit être égale à l'Indice \n text: 'Surf', // Texte qui sera afficher\n value: 15, // Valeur initiale\n description: 'Surface du rectangle en m2', // Description de l'élément\n unit: 'm2' // Unité de l'élément\n}, Nous souhaitons calculer l'inertie de la section rectangulaire suivant Y. Pour cela, nous rajoutons dans la partie initialData.outputs :
Iyy: {\n name: 'Iyy',\n text: 'Iyy',\n value: 31.25,\n description: 'Inertie du rectangle suivant y',\n unit: 'm4'\n} Ce fichier permet de rajouter en un seul endroit toutes les fonctions de calcul que l'on souhaite. Ces fonctions prennent en paramètre inputs qui regroupe l'ensemble des inputs que l'on a définit dans la partie initialData.outputs du fichier initialData.js.
Par exemple, la fonction permettant de calculer la surface d'un section:
\nsurfaceRectangle: (inputs) => { // Prends en paramètre \"inputs\"\n const h = inputs.h.value; // Dans \"inputs\", on souhaite avoir la valeur de la hauteur \"h\" du rectangle\n const b = inputs.b.value; // Dans \"inputs\", on souhaite avoir la valeur de la largeur \"b\" du rectangle\n\n const surface = b * h; // On calcule la surface du rectangle \n\n return surface; // On retourne la surface du rectangle\n}, // NE PAS OUBLIER LA VIRGULEAfin de pouvoir calculer l'inertie d'une section rectangulaire suivant l'axe Y, on rajoute donc à la suite la fonction suivante:
\ninertiaYY: (inputs) => {\n const h = inputs.h.value;\n const b = inputs.b.value;\n\n const Iyy = h * b**3 /12;\n \n return Iyy;\n}, // NE PAS OUBLIER LA VIRGULEUne fois les éléments définis, on peut afficher les inputs dans le fichier Inputs.jsx en insérant un composant InputElem:
<!-- InputElem correspondant à la largeur \"b\" de la section rectangulaire -->\n<InputElem \n data={inputsData.b}\n updateValue={updateValue}\n/>\n<!-- InputElem correspondant à la hauteur \"h\" de la section rectangulaire -->\n<InputElem \n data={inputsData.h}\n updateValue={updateValue}\n/>On spécifie ainsi dans data={inputsData.h} que l'on fait référence à l'élément ayant l'indice h dans le fichier initialData.js.
De même, on peut afficher les outputs dans le fichier Outputs.jsx en insérant un composant OutputElem:
<!-- OutputElem correspondant à la surface \"A\" de la section rectangulaire -->\n<OutputElem \n data={outputsData.A}\n inputsData={inputsData}\n calculationFunctions={calculationFunctions.surfaceRectangle}\n/>On spécifie ainsi dans data={outputsData.A} que l'on fait référence à l'élément ayant l'indice A dans le fichier initialData.js et dans calculationFunctions la fonction de calcul que l'on souhaite utiliser.
Ainsi pour afficher l'inertie de la section rectangulaire suivant Y, on ajoute le composant suivant:
\n<OutputElem \n data={outputsData.Iyy}\n inputsData={inputsData}\n calculationFunctions={calculationFunctions.inertiaYY}\n/>Nous avons vu les composants InputElem et OutputElem qui permettent respectivement d'afficher les inputs et les outputs définis dans initialData.js.\nLes composants sont listés dans le dossier src/Components:
InputElemOutputElemChartElemInputElem sert à définir les inputs de l'application, il possède les propriétées:
data: permet d'associer à un élément définis dans la partie initialData.inputs de initialData.jsupdateValue: permet de mettre à jour la valeur de l'élémentExemple:
\n<!-- Affiche l'input \"h\" définit dans le fichier initialData.js -->\n<InputElem \n data={inputsData.h}\n updateValue={updateValue}\n/>OutputElem sert à définir les outputs de l'application, il possède les propriétées:
data: permet d'associer à un élément définis dans la partie initialData.outputs de initialData.jsinputsData: permet d'associer les inputscalculationFunctions: permet d'associer une fonction de calcul définis dans calculations.jsExemple:
\n<!-- Affiche l'output \"A\" définis dans le fichier initialData.js\n associé à la fonction \"surfaceRectangle\" définis dans le fichier \"calculation.js\"\n -->\n<OutputElem \n data={outputsData.A}\n inputsData={inputsData}\n calculationFunctions={calculationFunctions.surfaceRectangle}\n/>ChartElem permet d'afficher des graphes, il possède la propriété:
dataForChart: prend en paramètre un objet qui possède lui-même les propriétées suivantes:\ndataForChart: qui une chaîne de caractère et qui correspond au titre du graphevalue: qui est un tableau contenant l'ensemble des coordonnées {x: X, y: Y} que l'on souhaite afficheraxisName: qui est un objet contenant le nom des axes que l'on souhaite afficher: {x: nomAxeX, y: nomAxeY}unit: qui est un objet contenant le nom unités que l'on souhaite afficher: {x: unitéAxeX, y: unitéAxeY}Exemple:
\n<ChartElem\n dataForChart={{\n chartTitle: 'Section Rectangulaire',\n value: [\n {x: 0, y: 0},\n {x: inputsData.b.value, y: 0},\n {x: inputsData.b.value, y: inputsData.h.value},\n {x: 0, y: inputsData.h.value},\n {x: 0, y: 0}\n ],\n axisName: {x: 'Largeur de la Section ', y: 'Hauteur de la section '},\n unit: {x: 'm', y: 'm'}\n }}\n/>les composants éxistants de triazur-webapp-kit-serverless sont écrits en React.js, ils sont donc entièrement modifiables.
\nIl est également possible de rajouter des composants. Pour plus d'information, voir les tutoriels suivants:
\nAfin de mettre son application en ligne, nous allons utiliser Heroku qui permet de dépoyer des applications de manière gratuite.
\nPour cela, il faut d'abord:
\n$ npm install -g herokuAfin de vérifier qu'Heroku est correctement déployé:
\n$ heroku --version\n# heroku/7.0.0 (darwin-x64) node-v8.0.0Puis utiliser Git pour deployer l'application sur Heroku:
\n$ git add .\n$ git commit -m \"Added a Procfile.\"\n$ heroku login\n# Heroku credentials\n$ heroku create\n$ git push heroku master\n# Launching... done\n# http://example.herokuapp.com deployed to HerokuVotre application devrait être disponible sur http://example.herokuapp.com.
\n