Lecture 9 minutes

Ilicut, spécialiste de la production de panneaux de bois, a fait appel à Synolia pour remettre son site au goût du jour. Nous avons mené ce projet avec Sylius, une plateforme e-commerce permettant des développements très spécifiques. Et, dans le cadre de ce projet, nous avons développé un configurateur de panneaux bois. Le configurateur de projet Ilicut est un logiciel de création de plan de panneau de bois permettant de choisir son matériau, ses dimensions, d’ajouter des découpes et des finitions. Il offre une configuration sur mesure, adaptée aux besoins des clients.

 

 

Présentation visuelle et fonctionnelle

La configuration d’un panneau de bois se fait à l’aide d’un formulaire disponible sur le site Ilicut. Pensé pour les utilisateurs, ce formulaire se veut simple, intuitif, et se compose de quelques étapes seulement :

• D’abord, l’utilisateur choisit une forme de base. Elle peut être simple comme un rectangle ou un ovale ou bien complexe avec des assemblages d’angles.
• Ensuite, il renseigne les dimensions voulues en fonction des besoins.
• Il choisit une essence et son épaisseur, en fonction du stock disponible dans les dimensions saisies.
• Il précise les découpes dont il peut avoir besoin, que ce soit des découpes d’angles, sur les côtés ou bien intérieures.
• Il choisit l’usinage désiré sur les bords des planches, en fonction des restrictions des machines.
• Enfin, il choisit une finition pour le bois.

Chaque étape impacte le plan de sa configuration qui est mis à jour en temps réel. Le prix se met aussi à jour à chaque modification.

Présentation technique

Dans ce configurateur, une grande partie des éléments sont configurables par les administrateurs :

• Activation et désactivation des formes disponibles
• Dimensions minimales et maximales des matériaux
• Disponibilité des matériaux
• Activation et désactivation des découpes
• Formes de bords disponibles et leurs contraintes de dimensions de planches
• Finitions disponibles par matériaux

Cependant, la plus grosse partie de la logique se passe en javascript. L’administrateur pourra seulement activer ou désactiver des éléments.

Système de classes js

Classes abstraites

La configuration est mise en place grâce à une architecture de classes javascript. Un projet peut contenir une ou plusieurs Shapes (planches) qui, elles, auront zéro ou plusieurs Cuts (découpes).

Chacun des éléments peut être affiché sur le plan grâce à un Drawer. Un Drawer est une classe qui génère une forme vectorielle à dessiner grâce à la librairie Konvajs. Un second Drawer (le EdgeDrawer) sert à dessiner une vue spécifique pour sélectionner la forme des bords.

Enfin, pour chaque élément, une classe de hitbox permet de vérifier si des découpes ne se superposent pas. La hitbox sert aussi à vérifier que des découpes ne sont pas trop proches entre elles ou trop proches d’une jointure. Il s’agit d’une contrainte technique définie par Ilicut pour ne pas trop fragiliser les panneaux de bois. Cela évite que le bois casse pendant le transport, ou pendant son utilisation par le client.

Bleu : Hitbox de Shapes, pour les positions de découpes autorisées
Rouge : Hitbox de découpes

Classes pratiques

Les classes décrites précédemment sont des classes abstraites. Elles définissent seulement les fonctions et comportements communs à tous les éléments. Elles sont ensuite surchargées pour chacun des 9 Projects différents et leur 17 Shapes. Par exemple, un Rectangle a des dimensions longueur et largeur, tandis qu’un Cercle n’a qu’une dimension rayon. Leur affichage est aussi différent, évidemment.

Optimisation

Pour l’affichage notamment, certaines formes sont très proches voire quasiment identiques. Grâce à l’héritage, il est possible d’éviter de réécrire tout un comportement, et de réutiliser l’existant.

 

Système de controllers

Pour l’interface utilisateur et l’interactivité, le système de controllers Stimulus en javascript permet de séparer les comportements pour séparer la logique au maximum. Comme expliqué plus tôt, le formulaire du configurateur se déroule en six étapes : forme, dimensions, matériaux, découpes, bordures et finitions.

 

 

Nous avons donc créé de nombreux controllers avec chacun leur fonction. Ils peuvent gérer les saisies de l’utilisateur pendant une des étapes, ou bien gérer l’affichage de ces étapes.

Le controller de formulaire s’occupe de fermer les étapes terminées. Le controller de configuration applique les choix sur la classe de projet. Enfin, le controller de visualisation gère l’affichage de la configuration.

Grâce au système d’évènement, l’information peut descendre et remonter dans le configurateur selon les besoins.

Le grand nombre de controllers permet de répondre  à une logique de séparation des tâches. Ainsi, nous savons que le “edge_controller” s’occupe de la gestion des bordures. Le “visualisation_controller” met en place la visualisation. Nous pouvons donc rapidement corriger un problème lorsque la source est identifiée.

Système tests unitaires

Avec une telle architecture, les effets de bords peuvent être monnaie courante. Pour éviter cela, de nombreux tests unitaires ont été mis en place avec la librairie Jest. À chaque développement, nous ajoutons des cas pour faire du TDD (Test Driven Development). Et nous vérifions que tous les anciens tests passent toujours. Si une anomalie survient, nous ajoutons le cas d’erreur dans les tests unitaires avant de faire le fix.

Le temps d’implémentation des tests du configurateur peut s’avérer long et chronophage. Il est cependant gage de qualité et permet notamment un gain de temps considérable en phase de recette en prévenant de certains bugs.

Dessin avec Konva

Pour le dessin des projets, nous avons utilisé la librairie Konvajs. Elle permet de faire du dessin vectoriel. L’idée originale était d’utiliser les formes existantes, comme les cercles et les rectangles. Mais comme nous devions y ajouter des découpes, ce système a montré ses limites.

On a donc opté pour du dessin de polygones point par point. Une forme est une liste de points. Par exemple, un rectangle est composé de 4 points (A, B, C, D).

La création d’une découpe rectangulaire sur le bord supérieur ajoute quatre points (A, e, f, g, h, B, C, D)

Ensuite, la création d’une découpe en biseau sur l’angle en bas à droite remplace le point C par deux autres points (A, e, f, g, h, B, i, j, D).

Enfin, la création d’une découpe interne… Ne change pas les points ! C'est un piège ! Cela ajoute une forme de découpe par-dessus.

On se retrouve donc avec des listes de points, et il suffit de leur donner un remplissage pour voir la forme s’afficher. On réutilise ces points pour dessiner des traits de mesure sur le côté, et cela donne notre visualisation.

On répète ensuite ce processus pour chaque forme du projet. Un projet peut être fait d’une seule forme, ou d’un assemblage allant jusqu’à trois formes.

 

Notez que c’est rapide à expliquer mais que cela nous a demandé beaucoup de calculs et de géométrie pour avoir le rendu voulu, notamment avec les courbes. Encore une fois, des tests unitaires ont été ajoutés tout du long.

Géométrie des Hitboxes

Une des contraintes qui s’est posée en cours de projet était d’empêcher des découpes de se superposer, ou de se placer trop près d’une jointure sur un assemblage. Pour résoudre cela, nous avons mis en place des hitbox. Ce sont des formes similaires aux planches ou aux découpes mais légèrement plus grandes ou plus petites.

Lorsque l’on souhaite ajouter une découpe, nous réalisons différentes comparaisons :

• La hitbox de la découpe est-elle dans la hitbox de la planche (elle ne croise pas la hitbox, et n’est pas en dehors non plus) ?
• La hitbox de la découpe est-elle en contact avec la hitbox d’une autre découpe existante ?
• La hitbox de la découpe est-elle en contact avec la hitbox d’une autre découpe que l’on souhaite ajouter aussi (on peut ajouter plusieurs découpes à la fois) ?

Sur l’image, la hitbox de la planche est bleue. Les hitbox des découpes sont rouges.

Encore une fois, il a fallu de nombreux calculs et de la géométrie. Les tests unitaires nous ont été très utiles. En cas d’anomalie, nous avons ajouté les données dans les jeux de tests pour être sûrs de les résoudre, et que le problème n’apparaisse plus.

Conclusion

Le configurateur s’est révélé être un gros challenge technique pour notre équipe de développeurs. Il a nécessité de s’intéresser à de nombreux sujets. Nous avons créé une architecture complexe avec de nombreuses classes javascript, utilisant l’héritage. Nous avons mis en place une interface utilisateur avec un formulaire long. Et nous avons géré chaque étape avec un controller Stimulus qui permet de faire descendre ou remonter les informations selon les besoins. Ensuite, nous avons tout affiché grâce à la librairie Konvajs et son système de dessin vectoriel. Enfin, nous avons sécurisé tous nos développements grâce à de nombreux tests unitaires pour être certains de la qualité du code. Ce sont toutes ces étapes qui nous ont permis de créer ce configurateur sur mesure, adapté à la création de planches découpées.

 

Illustrations réalisées par Thomas Vermot-Gauchy, développeur web chez Synolia.