{"id":2381,"date":"2021-06-17T22:58:09","date_gmt":"2021-06-17T21:58:09","guid":{"rendered":"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/?p=2381"},"modified":"2021-06-18T10:06:52","modified_gmt":"2021-06-18T09:06:52","slug":"simulateur-de-systemes-en-javascript","status":"publish","type":"post","link":"https:\/\/blog.univ-angers.fr\/polytech_2A\/2021\/06\/17\/simulateur-de-systemes-en-javascript\/","title":{"rendered":"Simulateur de syst\u00e8mes en JavaScript"},"content":{"rendered":"

Bonjour \u00e0 toutes et \u00e0 tous !<\/strong><\/p>\n

Nous sommes trois \u00e9tudiants en seconde ann\u00e9e du cycle pr\u00e9paratoire de Polytech Angers et lors de ce quatri\u00e8me semestre nous avons travaill\u00e9 sur un simulateur de syst\u00e8mes de production en JavaScript. Vous trouverez dans cet article le d\u00e9roulement de notre projet et les probl\u00e8mes auxquels nous avons pu faire face !<\/p>\n

Objectif<\/strong><\/p>\n

Le but est de cr\u00e9er une application web pouvant simuler un syst\u00e8me de production, cela implique de programmer diff\u00e9rents composants tels que des convoyeurs, des aiguillages et d\u2019autres types de machines que l’on peut retrouver sur des cha\u00eenes de production r\u00e9elles.<\/p>\n

Ce genre de syst\u00e8me est souvent pris en exemple pour illustrer des travaux de recherche car il permet de suivre l\u2019\u00e9volution des flux du syst\u00e8me au cours du temps.<\/p>\n

Notre application devra \u00e9galement permettre \u00e0 un utilisateur de cr\u00e9er facilement ses propres syst\u00e8mes.<\/p>\n

Pourquoi JavaScript ?<\/strong><\/p>\n

Tout simplement car il s\u2019agit d\u2019un langage de programmation qui convient parfaitement aux applications web et permet de programmer des animations graphiques dans un navigateur comme nous en avons besoin pour cr\u00e9er notre simulateur.<\/p>\n

\"Logo<\/a>

Logo du langage JavaScript<\/p><\/div>\n

D\u00e9roulement du projet
\n<\/strong><\/p>\n

Pour que notre simulateur puisse \u00eatre le plus complet et permette un maximum de possibilit\u00e9s, nous avons cr\u00e9\u00e9 au total 9 composants utilisables dans le syst\u00e8me que voici :<\/p>\n

  • Les convoyeurs : ce sont eux qui permettent le mouvement des pi\u00e8ces entre les diff\u00e9rentes machines du syst\u00e8me.<\/li>\n
  • Les convoyeurs but\u00e9s : il s\u2019agit d\u2019un convoyeur normal avec en plus la capacit\u00e9 de stopper les pi\u00e8ces et de les faire repartir (on pourrait l\u2019assimiler \u00e0 un feu de circulation).<\/li>\n
  • Les machines : elles traitent les pi\u00e8ces en un certain temps et peuvent en traiter \u00e9galement qu\u2019un certain nombre simultan\u00e9ment. Pour plus de dynamisme, leur design change en fonction de leur stock pendant la simulation.<\/li>\n
  • Les lots : ce sont des machines qui rassemblent un nombre d\u00e9fini de pi\u00e8ces en une seule pi\u00e8ce.<\/li>\n
  • Les lots doubles : des machines poss\u00e9dant le m\u00eame comportement que les lots mais avec deux entr\u00e9es pour les pi\u00e8ces et chacune de ces deux entr\u00e9es doit avoir un nombre d\u00e9fini de pi\u00e8ces pour cr\u00e9er un lot.<\/li>\n
  • Les d\u00e9coupeurs : des machines qui d\u00e9coupent une pi\u00e8ce en plusieurs pi\u00e8ces.<\/li>\n
  • Les d\u00e9coupeurs doubles : ils fonctionnent comme les d\u00e9coupeurs mais la sortie des pi\u00e8ces d\u00e9coup\u00e9es est divis\u00e9e en deux.<\/li>\n
  • Les aiguillages : ils permettent de s\u00e9parer les pi\u00e8ces qui arrivent. Cette s\u00e9paration suit une logique cyclique : dans l\u2019image suivante une pi\u00e8ce va en bas (0) puis deux pi\u00e8ces vont en haut (1).<\/li>\n
  • Les t\u00e9l\u00e9porteurs : des \u00e9l\u00e9ments qui transportent les pi\u00e8ces \u00e0 travers la simulation afin de simplifier les \u00e9changes entre les machines sans surcharge visuelle.<\/li>\n

    \"Un<\/a><\/p>\n

    Avec tous ces composants disponibles nous avons pu cr\u00e9er plusieurs presets (exemples de syst\u00e8me de production d\u00e9j\u00e0 faits) permettant \u00e0 l\u2019utilisateur de tester et de comprendre plus rapidement le comportement de chaque machine et leur mani\u00e8re de fonctionner.<\/p>\n

    Vous pouvez tester ces diff\u00e9rents presets et essayer de cr\u00e9er votre propre syst\u00e8me en t\u00e9l\u00e9chargeant notre programme ici<\/a><\/p>\n

    Les probl\u00e8mes rencontr\u00e9s<\/strong> <\/p>\n

    Bien que le langage JavaScript soit le plus adapt\u00e9 pour ce projet, aucun de nous trois n\u2019avait auparavant cod\u00e9 en JavaScript. Nous avons d\u00fb faire de nombreuses recherches pour apprendre les bases avant de commencer \u00e0 travailler.<\/p>\n

    Nous nous sommes rapidement rendu compte qu\u2019il n\u2019allait pas \u00eatre simple pour l\u2019utilisateur et m\u00eame pour nous-m\u00eame de cr\u00e9er des syst\u00e8mes complexes s\u2019il faut les coder directement dans le programme. C\u2019est pour cette raison que nous avons cr\u00e9\u00e9 une autre page qui permet d\u2019ajouter et de retirer des machines bien plus facilement et avec un aper\u00e7u du syst\u00e8me final en temps r\u00e9el avant de lancer r\u00e9ellement la simulation.<\/p>\n

    Le r\u00e9sultat<\/strong><\/p>\n

    Apr\u00e8s plus d\u2019une centaine d\u2019heures de travail sur ce projet, nous avons pu aboutir \u00e0 un r\u00e9sultat fonctionnel et qui satisfait le cahier des charges ainsi que nous-m\u00eame. <\/p>\n

    Voici une courte vid\u00e9o faisant la d\u00e9monstration du premier preset int\u00e9gr\u00e9 \u00e0 notre application :
    \n

    https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Desktop-2021.06.17-14.22.05.02.DVR-online-video-cutter.com_.mp4<\/a><\/video><\/div><\/p>\n

    Les am\u00e9liorations possibles<\/strong><\/p>\n

    Avec plus de temps et de moyen, nous aurions pu envisager la mise en place d\u2019un serveur offrant la possibilit\u00e9 \u00e0 un utilisateur de se connecter pour enregistrer et r\u00e9cup\u00e9rer ses cr\u00e9ations plus facilement qu\u2019avec la fonction de copier-coller actuel.<\/p>\n

    La page principale o\u00f9 l\u2019on cr\u00e9e sa simulation peut \u00e9galement \u00eatre am\u00e9lior\u00e9e d\u2019un point de vue ergonomique avec un syst\u00e8me de \u201cGlisser-d\u00e9poser\u201d par exemple pour placer les diff\u00e9rents composants.<\/p>\n

    Conclusion<\/strong><\/p>\n

    Cette exp\u00e9rience a \u00e9t\u00e9 riche et tr\u00e8s enrichissante pour nous trois. Adepte de l\u2019informatique, nous avons pris beaucoup de plaisir \u00e0 travailler sur ce simulateur et avons \u00e9galement beaucoup appris. Les probl\u00e8mes rencontr\u00e9s n\u2019ont fait que renforcer nos connaissances du sujet et nous ont permis d\u2019acqu\u00e9rir de nouvelles comp\u00e9tences qui nous seront utiles un jour dans notre carri\u00e8re professionnelle.<\/p>\n

    Nous tenons \u00e0 remercier M. COTTENCEAU pour son encadrement tout au long du projet.<\/p>\n

    Merci d\u2019avoir lu notre article jusqu\u2019au bout !<\/strong><\/p>\n

    Antoine Buquet
    \nThomas Billequin
    \nMathis Vaugeois<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

    Bonjour \u00e0 toutes et \u00e0 tous ! Nous sommes trois \u00e9tudiants en seconde ann\u00e9e du cycle pr\u00e9paratoire de Polytech Angers et lors de ce quatri\u00e8me semestre nous avons travaill\u00e9 sur un simulateur de syst\u00e8mes de production en JavaScript. Vous trouverez … Continuer la lecture →<\/span><\/a><\/p>\n","protected":false},"author":76307,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[344],"tags":[146,487,179,22,382,486],"class_list":["post-2381","post","type-post","status-publish","format-standard","hentry","category-344","tag-animation","tag-application-web","tag-developpement","tag-javascript","tag-simulation","tag-systeme-de-production"],"_links":{"self":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/2381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/users\/76307"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/comments?post=2381"}],"version-history":[{"count":0,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/2381\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/media?parent=2381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/categories?post=2381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/tags?post=2381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}