TriDyme | Créer sa propre Application Web

Les avantages d'une Application Web

Les Applications Web sont de plus en plus utilisées pour palier aux problématiques liés aux Excels qui constituent souvent l'outils de travail de base que se soit en bureau d'étude ou sur chantier (voir notre article 4 raisons de passer de l'Excel aux Applications Web)

Les avantages de Application Web sont nombreux:

accessible directement en ligne
meilleur collaboration et diffusion
controle et capitalisation du savoir-faire
meilleur maintenance et mise à jour
meilleur controle de la qualité

L'objectif de cet article est donc de permettre le développement facile d'une Application Web pour le secteur de la construction (mais cela pourrait être utilisé dans n'importe quel secteur) et le tout de manière gratuite.

Créer son Application Web

Afin de permettre aux ingénieurs de pouvoir développer leurs propres applications en ligne, TriDyme met à disposition le kit de développement sdk-structure-app.

Ce projet a pour objectif de servir de base simple pour permettre de créer et de publier gratuitement ses propres applications web.

La démo est accessible ici: 👉Démo👈.

Une fois plus à l'aise, un univers de possibilité s'offre à vous!!! 🚀

Vous pourrez remplacer vos Excels préférés et étendre leur capacité à la fois en terme de calcul ou d'interface en intégrant du 3D et du BIM (voir Pour aller plus loin).

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

sdk-structure-app 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

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

Cloner le projet

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

$ git clone https://github.com/tridyme/sdk-structure-app.git
Cloning into 'sdk-structure-app'...
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 sdk-structure-app comme vous le souhaitez, ici nous l'appelerons section-analysis:

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 ./section-analysis
$ 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 décrivant l'ensemble de l'application à savoir: src/App.js.

Ce dernier va contenir toutes les vues de notre Application. Les vues sont situées dans le dossier src/Views. Il n'y a qu'une seule vue dans cette Application à savoir src/Views/SectionAnalysis.js qui est appelé dans le src/App.js de la manière suivante:

import SectionAnalysis from './Views/SectionAnalysis/SectionAnalysis';

Cependant afin de rajouter notre calcul, seul les deux fichiers suivant nous intéressent:

calculations.js, est le fichier qui contient nos fonctions de calculs, par exemple la fonction permetant de calculer la surface du rectangle, son inertie suivant X,...
SectionAnalysis.js, est le fichier qui affiche notre vue

Le calcul: calculation.js

Ce fichier permet de rajouter en un seul endroit toutes les fonctions de calcul que l'on souhaite:

Par exemple, la fonction permettant de calculer la surface d'un section:

  A: (inputs) => {
    const {
      b,
      h
    } = inputs;
    return b * h;
  }, // 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:

  Iyy: (inputs) => {
    const {
      b,
      h
    } = inputs;
    return h * b ** 3 / 12;
  }, // NE PAS OUBLIER LA VIRGULE

Enfin, on met également à jour la fonction outputs qui permet de remettons les résultats du calcul et rajoutant le paramètre Iyy:

  outputs: (inputs) => {
    return {
      A: calculations.A(inputs),
      Ixx: calculations.Ixx(inputs),
      Iyy: calculations.Iyy(inputs)
    }
  }, // NE PAS OUBLIER LA VIRGULE

La vue SectionAnalysis

Ce fichier contient donc la vue de notre Application de calcul de section rectangulaire. Il affiche les données d'entrée du calcul à savoir la largeur et la hauteur de la section, les résultats du calcul ainsi qu'un graphe permettant de visualiser la section.

Les paramètres que l'on souhaite afficher, se trouve dans à cet endroit:

  const [values, setValues] = useState({
    b: 2,         // Inputs: Largeur du rectangle
    h: 3,         // Inputs: Hauteur du rectangle
    A: 6,         // Outputs: Surface du rectangle
    Ixx: 4.5      // Outputs: Inertie du rectangle suivant X
  });

Nous souhaitons calculer l'inertie de la section rectangulaire suivant Y. Pour cela, nous rajoutons l'attribut Iyy:

  const [values, setValues] = useState({
    b: 2,         // Inputs: Largeur du rectangle
    h: 3,         // Inputs: Hauteur du rectangle
    A: 6,         // Outputs: Surface du rectangle
    Ixx: 4.5,     // Outputs: Inertie du rectangle suivant X,
    Iyy: 2        // Outputs: Inertie du rectangle suivant Y,
  });

Nous pouvons interagir et modifier les données d'entrées grâce au composant InputElem.

    <InputElem
      value={values.A}
      text={'A'}
      description={'Surface:'}
      unit={'m2'}
      onChange={handleChangeValues('A')}
    />

La fonction handleChangeValues permet de gérer la mise à jour de l'affichage suite au calcul.

Afin d'afficher l'inertie suivant Y, nous rajoutons donc un composant InputElem pour Iyy de la manière suivante:

  <CardElem
    title="Résultats"
    subtitle="Section: caractéristiques"
  >
    <InputElem
      value={values.A}
      text={'A'}
      description={'Surface:'}
      unit={'m2'}
      onChange={handleChangeValues('A')}
    />
    <InputElem
      value={values.Ixx}
      text={'Ixx'}
      description={'Interie suivant x:'}
      unit={'m4'}
      onChange={handleChangeValues('Ixx')}
    />
    <InputElem
      value={values.Iyy}
      text={'Iyy'}
      description={'Interie suivant y:'}
      unit={'m4'}
      onChange={handleChangeValues('Iyy')}
    />
</CardElem>

Les composants

Nous avons vu le composant InputElem qui permet respectivement d'afficher les valeurs définis dans values. Les composants sont listés dans le dossier src/Components. Tout comme les vues, vous êtes libres de les modifier ou de créer vos propres composants. Les autres composants présents dans SectionAnalysis.js sont:

ChartElem
Grid
CardElem

ChartElem

Il est importé à partir du répertoire Components de la manière suivante:

import ChartElem from '../../Components/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'}
  }}
/>

Grid

Le composant Grid provient de la librairie @material-ui/core et qui permet de constitué une grille dans laquelle les composants sont organisés et affichés de manière responsive (c'est à dire que l'affichage s'adapte à la taille de l'écran). Ce composant est importé de la librairie @material-ui/core de la manière suivante:

import {
  Grid
} from '@material-ui/core';

CardElem

Ce composant est importé à partir du répertoire Components de la manière suivante:

import CardElem from '../../Components/CardElem';

Il permet d'afficher les Cartes contenant les composants InputElem.

Modification et ajout de composant

les composants éxistants de sdk-structure-app 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

Déployer son code sur GitHub

Afin de mettre son application en ligne et la déployer de manière simple à chaque mise à jour, il faut d'abord la déployer sur GitHub, pour cela voir le tutoriel: Héberger et versionner son code avec GitHub

Mettre son application en ligne

Afin de mettre son application en ligne, voir le tutoriel suivant: Deployer son Application Web en ligne gratuitement avec Netlify.

Pour aller plus loin

Sur la partie calcul

Vous pouvez utliser la librairie opensource @tridyme/aec qui permet de faire des calculs pour le secteur AEC (Architecture Engineering and Construction).

En utilisant cette librairie, vous pouvez remplacer le code de calculation.js par le suivant:

import { SectionGeometry } from '@tridyme/aec';

//Option 1: utilisation de la librairie @tridyme/aec: https://github.com/tridyme/aec
const calculations = {
  outputs: (inputs) => {
    return {
      A: new SectionGeometry.RectangularSection(inputs).A,
      Ixx: new SectionGeometry.RectangularSection(inputs).Iy
    }
  }
}

export default calculations;

Pour plus de détail sur cette librairie, voir son répertoire sur GitHub.

Sur la partie développement

Un nouvel univers s'offre à vous. Si vous souhaitez intégrer de 3D ou du BIM dans vos Applications Web, vous pouvez utiliser notre kit de développement open source: sdk-bim-viewer.