TriDyme | Developpers: triazur-webapp-kit-serverless

Créer mon application

Afin 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.

Ce projet vous permet de créer et de publier vos propres applications de ligne et de les proposer dans la marketplace de TriAzur.

Installations

Les prérequis suivants doivent être installé:

Un environnement d'exécution JavaScript: Node.js, téléchargeable ici
Un logiciel de gestion de versions: Git, téléchargeable ici
Un éditeur de code cross-platform: VSCode, téléchargeable ici

Node.js

triazur-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).

Pour installer Node.js, allez sur https://nodejs.org/fr/download/ puis suivez les instructions.

Afin 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
v10.3.0

Node.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
6.9.0

Git

Git 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.

De même, pour vérifier que l'installation c'est bien déroulé, taper la commande git version:

$ git version
git version 2.21.0.windows.1

Créer un compte Gitlab

Les sites Github et GitLab utilisent Git pour permettre aux utilisateurs de pouvoir stocker leurs codes et de le partager.

Le code peut être stocké de manière publique, on parle alors d'Open Source, où de manière privée.

Nous présenterons GitLab qui a l'avantage de pouvoir stocker gratuitement une nombre de projet privé illimité.

Pour clea il suffit de créer un compte sur GitLab à l'adresse suivante: https://gitlab.com/users/sign_in

Ensuite nous allons créer un nouveau projet que nous nommons: my-first-app.

Nous 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

VSCode (recommandé)

Afin 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.

Pour l'installer: https://code.visualstudio.com/Download.

Créer notre première application

Clone triazur-webapp-kit-serverless

Afin de créer notre première application, commençons par cloner triazur-webapp-kit-serverless grâce à git dans le repertoire ou nous souhaitons :

$ git clone https://gitlab.com/triazur/triazur-webapp-kit-serverless.git
Cloning into 'triazur-webapp-kit-serverless'...
remote: Enumerating objects: 91, done.
remote: Counting objects: 100% (91/91), done.
remote: Compressing objects: 100% (76/76), done.
remote: Total 91 (delta 13), reused 0 (delta 0)
Unpacking objects: 100% (91/91), done.

Démarrage

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:

Puis, 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
$ npm install
$ npm start

Notez 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/ ).

Cette application permet de calculer la surface d'un rectangle ainsi que son inertie suivant X.

Ajouter des fonctionnalités

A présent, nous souhaitons pouvoir également calculer l'inertie du rectangle suivant Y.

Afin de modifier notre application, allez dans le dossier src. On 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:

src

calculations.js, est le fichier qui contient nos fonctions de calculs, par exemple la fonction permetant de calculer la surface du rectangle
Inputs.jsx, est le fichier qui affiche nos inputs tels que la hauteur où la largeur du rectangle
Outputs.jsx, est le fichier qui affiche nos inputs tels que la surface où l'inertie du rectangle
initialData.js, est le fichier qui contient les valeurs initiales, les descriptifs de inputs et des outputs ainsi que les unités.

Valeurs initiales: initialData.js

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:

A: {    // Indice de l'élément à afficher
  name: 'A',    // Nom de l'élément à afficher, doit être égale à l'Indice 
  text: 'Surf', // Texte qui sera afficher
  value: 15,    // Valeur initiale
  description: 'Surface du rectangle en m2', // Description de l'élément
  unit: 'm2' // Unité de l'élément
},

Nous souhaitons calculer l'inertie de la section rectangulaire suivant Y. Pour cela, nous rajoutons dans la partie initialData.outputs :

Iyy: {
  name: 'Iyy',
  text: 'Iyy',
  value: 31.25,
  description: 'Inertie du rectangle suivant y',
  unit: 'm4'
}

Le calcul: calculation.js

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:

surfaceRectangle: (inputs) => {   // Prends en paramètre "inputs"
  const h = inputs.h.value;   // Dans "inputs", on souhaite avoir la valeur de la hauteur "h" du rectangle
  const b = inputs.b.value;   // Dans "inputs", on souhaite avoir la valeur de la largeur "b" du rectangle

  const surface = b * h;  // On calcule la surface du rectangle 

  return surface; // On retourne la surface du rectangle
}, // NE PAS OUBLIER LA VIRGULE

Afin de pouvoir calculer l'inertie d'une section rectangulaire suivant l'axe Y, on rajoute donc à la suite la fonction suivante:

inertiaYY: (inputs) => {
  const h = inputs.h.value;
  const b = inputs.b.value;

  const Iyy = h * b**3 /12;
  
  return Iyy;
}, // NE PAS OUBLIER LA VIRGULE

Les inputs: Inputs.jsx

Une 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 -->
<InputElem 
  data={inputsData.b}
  updateValue={updateValue}
/>
<!-- InputElem correspondant à la hauteur "h" de la section rectangulaire -->
<InputElem 
  data={inputsData.h}
  updateValue={updateValue}
/>

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.

Les outputs: Outputs.jsx

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 -->
<OutputElem 
  data={outputsData.A}
  inputsData={inputsData}
  calculationFunctions={calculationFunctions.surfaceRectangle}
/>

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:

<OutputElem 
  data={outputsData.Iyy}
  inputsData={inputsData}
  calculationFunctions={calculationFunctions.inertiaYY}
/>

Les composants

Nous avons vu les composants InputElem et OutputElem qui permettent respectivement d'afficher les inputs et les outputs définis dans initialData.js. Les composants sont listés dans le dossier src/Components:

InputElem
OutputElem
ChartElem

InputElem

InputElem 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.js
updateValue: permet de mettre à jour la valeur de l'élément

Exemple:

<!-- Affiche l'input "h" définit dans le fichier initialData.js -->
<InputElem 
  data={inputsData.h}
  updateValue={updateValue}
/>

OutputElem

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.js
inputsData: permet d'associer les inputs
calculationFunctions: permet d'associer une fonction de calcul définis dans calculations.js

Exemple:

<!-- Affiche l'output "A" définis dans le fichier initialData.js
  associé à la fonction "surfaceRectangle" définis dans le fichier "calculation.js"
  -->
<OutputElem 
  data={outputsData.A}
  inputsData={inputsData}
  calculationFunctions={calculationFunctions.surfaceRectangle}
/>

ChartElem

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:
- dataForChart: qui une chaîne de caractère et qui correspond au titre du graphe
- value: qui est un tableau contenant l'ensemble des coordonnées {x: X, y: Y} que l'on souhaite afficher
- axisName: 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:

<ChartElem
  dataForChart={{
    chartTitle: 'Section Rectangulaire',
    value: [
    {x: 0, y: 0},
    {x: inputsData.b.value, y: 0},
    {x: inputsData.b.value, y: inputsData.h.value},
    {x: 0, y: inputsData.h.value},
    {x: 0, y: 0}
    ],
    axisName: {x: 'Largeur de la Section ', y: 'Hauteur de la section '},
    unit: {x: 'm', y: 'm'}
  }}
/>

Modification et ajout de composant

les composants éxistants de triazur-webapp-kit-serverless sont écrits en React.js, ils sont donc entièrement modifiables.

Il est également possible de rajouter des composants. Pour plus d'information, voir les tutoriels suivants:

Pour React.js sur Openclassrooms: Réalisez une application web avec React.js
React.js est basé lui-même sur Javascript qui est le language permettant de faire des calculs dans le navigateur web, pour plus d'information, voir le tutoriel d'Openclassrooms: Dynamisez vos sites web avec JavaScript

Mettre son application en ligne

Afin de mettre son application en ligne, nous allons utiliser Heroku qui permet de dépoyer des applications de manière gratuite.

Installation d'Heroku

Pour cela, il faut d'abord:

Créer un compte Heroku: https://signup.heroku.com/login
Puis installer Heroku:

$ npm install -g heroku

Afin de vérifier qu'Heroku est correctement déployé:

$ heroku --version
#   heroku/7.0.0 (darwin-x64) node-v8.0.0

Déploiement de l'application

Puis utiliser Git pour deployer l'application sur Heroku:

$ git add .
$ git commit -m "Added a Procfile."
$ heroku login
#   Heroku credentials
$ heroku create
$ git push heroku master
#   Launching... done
#      http://example.herokuapp.com deployed to Heroku

Votre application devrait être disponible sur http://example.herokuapp.com.

License

MIT license

TriDyme Documentation

Commencer

Applications

Autres

Créer mon application

Sommaire (Optional)

Installations

Node.js

Git

Créer un compte Gitlab

VSCode (recommandé)

Créer notre première application

Clone triazur-webapp-kit-serverless

Démarrage

Ajouter des fonctionnalités

Valeurs initiales: initialData.js

Le calcul: calculation.js

Les inputs: Inputs.jsx

Les outputs: Outputs.jsx

Les composants

InputElem

OutputElem

ChartElem

Modification et ajout de composant

Mettre son application en ligne

Installation d'Heroku

Déploiement de l'application

License