Jouets Écoiffier

Développement web d’une application pour une gestion efficace des ordres de fabrication

Pour optimiser et fluidifier la gestion de sa fabrication, l’entreprise a confié à Open Yama le développement d’une application métier sur-mesure dédiée à la gestion des ordres de fabrication.

Face à l’évolution rapide des ordres de fabrication, il était essentiel de proposer un système visuel, intuitif et interactif permettant aux opérateurs de consulter, organiser et suivre en temps réel l’ensemble des ordres programmés. Grâce à un code couleur, l’identification des statuts est immédiate, facilitant ainsi la prise de décision.

L’application permet également de :

• Gérer plusieurs lignes de production chez un même partenaire pour paralléliser les commandes.
• Déplacer les ordres sur la timeline avec détection automatique des conflits et validation simplifiée.
• Afficher les ordres sous forme de tableau (datagrid) pour un tri et une organisation efficaces.
• Utiliser des filtres avancés pour affiner la recherche sur la timeline et le tableau de suivi.
• Exporter les données au format CSV et générer un rapport journalier des opérations réalisées.

Le développement de l’application repose sur des choix technologiques pensés pour assurer performance et évolutivité. Pour répondre aux besoins de visualisation, filtrage et manipulation des ordres de fabrication, nous avons construit une architecture backend avec Symfony, API Platform et un module de visualisation en React, intégrant react-table et react-query.

API Platform : un backend performant et évolutif

Basé sur Symfony, API Platform offre un cadre de développement efficace pour créer une API RESTful et GraphQL robuste. Grâce à son système de génération automatique d’API, les endpoints sont directement dérivés des entités Doctrine, ce qui réduit considérablement le temps de développement et garantit une cohérence parfaite entre les données du backend et les besoins du front-end.

L’un des atouts majeurs de cette solution réside dans sa gestion native de la pagination, du tri et des filtres, permettant d’optimiser les requêtes et d’afficher uniquement les informations nécessaires. Associé à un système de sérialisation performant, ce mécanisme améliore significativement la réactivité de l’application tout en limitant la charge serveur.

Un datagrid réactif et flexible avec react-table et react-query

La visualisation des ordres de fabrication sous forme de tableau devait être fluide, intuitive et capable de traiter une grande quantité de données sans compromettre les performances. Pour cela, nous avons choisi d’exploiter react-table et react-query au sein de notre application en React.

react-table permet d’afficher les ordres de fabrication de manière structurée et personnalisable, tout en garantissant une navigation fluide même lorsque le volume de données devient conséquent. Grâce à son système de virtualisation des lignes, l’interface reste rapide et réactive, même avec un grand nombre d’entrées. La gestion dynamique des colonnes permet d’adapter l’affichage aux besoins des opérateurs, qui peuvent trier, filtrer et organiser les informations selon différents critères.

L’intégration de react-query optimise encore davantage l’expérience utilisateur en assurant une mise à jour automatique des données. Les ordres de fabrication sont synchronisés en temps réel avec le backend, évitant ainsi aux utilisateurs de devoir actualiser manuellement la page pour voir les modifications. Cette approche garantit également une meilleure gestion du cache, limitant les appels inutiles à l’API et améliorant les performances globales de l’application.