Points d’arrêt en Javascript

Une application legacy, le code HTML et JavaScript sont tellement mélangés qu’il devient difficile de savoir quand un élément du DOM a changé et pourquoi.
Grace aux outils de développement de Google Chrome ou Mozilla Firefox, il est possible de poser un point d’arrêt conditionnel.

Voici le code suivant, volontairement très simplifié :

<body>
<input type="text" id="name">
<script>
    setTimeout(function () {
        document.getElementById('name').disabled = 'disabled';
    }, 2000);
</script>
</body>

Avec ce code, 2 secondes après l’affichage de la page, le champ « name » va être désactivé.

Pour poser un point d’arrêt lorsque l’attribut « disabled » va changer, il faut :

  1. Ouvrir les outils de développements sur l’onglet « Inspecteur » (Firefox) ou « Éléments » (Chrome).
  2. Cliquer droit sur l’élément du DOM à surveiller (ici la balise « input »).
  3. Sélectionner « Point d’arrêt sur… » (Firefox) ou « Arrêt activé » (Chrome).
  4. Sélectionner « Une modification d’attribut » (Firefox) ou « modifications d’attribut » (Chrome).
  5. Recharger la page.

Liaison avec un automate industriel

Contexte : La société Faurecia est le leader technologique de l’industrie automobile. Au sein de leurs usines, les agents ont besoin d’un outil pour leur permettre d’ordonner les pièces suivant les priorités de la chaîne de montage.

Réalisation : Développement d’un serveur HTTP accessible par des tablettes. Développement d’un serveur TCP appelé par le serveur HTTP et l’automate industriel pour échanger.

Contraintes : Les dispositifs utilisés ont une résolution très réduite (800×480) pour pouvoir être attachés à un bras. Le code est déposé dans un serveur Windows intégré à l’automate, verrouillé en lecture seule après déploiement et sans accès Internet.

Technologies : NodeJS

Application de télé-relève

Contexte : Une société spécialisée dans la commercialisation de services de gestion du cycle de l’eau (*) intervient sur plusieurs sites pour relever des indicateurs et effectuer des entretiens.

Réalisation : Développement d’une application web responsive accessible via mobile. L’application se décompose en 2 parties : la saisie et la consultation. L’administration des sites est prévue pour être la plus flexible possible et permettre l’ajout de nouveaux sites sans développement ultérieurs. Un export Excel est réalisé pour effectuer le lien avec le système interne.

Contraintes : La flotte des dispositifs utilisés peut comprendre Android & iOS. Certains sites sont parfois à la limite du réseau mobile ou complètement sans connectivité : l’application doit permettre la saisie hors-ligne.

Technologies : PHP, Symfony Full-Stack, VueJS, HTML5, CSS3, Bootstrap CSS, MySQL, LocalStorage

(*) La société n’a pas donné son accord pour apparaître ici.