{"id":2231,"date":"2021-06-18T11:12:20","date_gmt":"2021-06-18T10:12:20","guid":{"rendered":"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/?p=2231"},"modified":"2021-06-18T11:12:55","modified_gmt":"2021-06-18T10:12:55","slug":"the-next-edison","status":"publish","type":"post","link":"https:\/\/blog.univ-angers.fr\/polytech_2A\/2021\/06\/18\/the-next-edison\/","title":{"rendered":"The Next Edison &#8211; Serious Game sur l&#8217;Innovation"},"content":{"rendered":"<p><em>\u201cLe but de ce projet est la conception et la r\u00e9alisation du mat\u00e9riel pour un serious game sur l\u2019innovation. Ce jeu qui a \u00e9t\u00e9 test\u00e9 lors de formation continue chez Renault a besoin d\u2019une conception plus approfondie en terme de mat\u00e9riel (carte, mat\u00e9rialisation du jeu sous forme de plateau et application num\u00e9rique) Un travail de compr\u00e9hension et de test de l\u2019algorithme du jeu doit \u00eatre effectu\u00e9 pour rendre le jeu \u00e0 la fois ludique et s\u00e9rieux (bas\u00e9s sur des mod\u00e8les r\u00e9els de vente de produits concurrentiels).\u201d<\/em><\/p>\n<p>Voici la consigne de notre projet.<\/p>\n<p>Nous sommes Wesley Wasielewski, Auxence Sirieix et Matis David, et  nous allons vous pr\u00e9senter notre travail r\u00e9alis\u00e9 durant le 4e semestre de notre cycle pr\u00e9paratoire \u00e0 Polytech Angers.<\/p>\n<p>Dans notre \u00e8re et conscients des enjeux du num\u00e9rique, nous avons tout de suite grimac\u00e9 \u00e0 l\u2019id\u00e9e de cr\u00e9er un jeu de plateau, de plus qu\u2019il s\u2019agissait de notre 6\u00e8me choix de projet. Futurs ing\u00e9nieurs, nous faisons partie des cr\u00e9ateurs de demain et il nous semblait logique d\u2019op\u00e9rer avec les technologies contemporaines.<\/p>\n<p>Nous avons donc l\u00e9g\u00e8rement modifi\u00e9 la consigne, avec l\u2019accord de notre encadrant : nous allions respecter le but d\u2019un serious game (apprendre en s\u2019amusant), mais de mani\u00e8re d\u00e9mat\u00e9rialis\u00e9e : nous voulions rendre l\u2019acc\u00e8s possible au multijoueur en ligne, tr\u00e8s en vogue en cette p\u00e9riode de pand\u00e9mie.<\/p>\n<p>I &#8211; Objectifs<\/p>\n<p>Le but d\u2019un serious game est d\u2019apprendre en s\u2019amusant. Depuis toujours, les m\u00e9thodes d\u2019apprentissage de nouvelles connaissances ne font pas partie des activit\u00e9s les plus amusantes. Or, il se pourrait bien qu\u2019un nouveau proc\u00e9d\u00e9 d\u2019apprentissage change la donne.<br \/>\nC\u2019est le d\u00e9fi qu\u2019on s\u2019est lanc\u00e9 : d\u00e9velopper un serious game en ligne pour apprendre l\u2019innovation, et surtout des notions de la vie r\u00e9elle en entreprise.<\/p>\n<p>Seulement, d\u00e9velopper un jeu web d\u2019une telle complexit\u00e9 requiert une expertise qu\u2019aucun des membres du groupe ne poss\u00e8de. Nous avons cependant des bases en d\u00e9veloppement informatique et une expertise sur Bubble, un outil de programmation visuelle (aussi dit \u201clow-code\u201d).<\/p>\n<p>Malheureusement, ce genre d\u2019outil n\u2019est absolument pas fait pour du jeu. Il est con\u00e7u pour cr\u00e9er des applications, sans vraies interactions en temps r\u00e9el avec les autres utilisateurs.<\/p>\n<p>De nature comp\u00e9titifs, nous nous sommes lanc\u00e9s le d\u00e9fi de r\u00e9aliser un jeu de ce genre sur un outil qui n\u2019est initialement pas pr\u00e9vu pour. Seulement quelques am\u00e9ricains ont su relever ce d\u00e9fi.<\/p>\n<p>D\u2019une certaine mani\u00e8re, notre serious game sur l\u2019innovation est une innovation en elle-m\u00eame.<\/p>\n<p>II &#8211; Base de donn\u00e9es<\/p>\n<p>Afin d\u2019obtenir un jeu performant et bien huil\u00e9, une bonne architecture de base de donn\u00e9es est essentielle. Ici, nous n\u2019allons pas d\u00e9tailler chaque champ de chaque table, mais allons en donner quelques-uns \u00e0 titre d\u2019exemple.<\/p>\n<p>Commen\u00e7ons par la table ma\u00eetre de notre application : Game.<\/p>\n<p>Elle poss\u00e8de une quinzaine de champs, que nous pouvons apercevoir sur la capture d\u2019\u00e9cran ci-dessous :<\/p>\n<p><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/bdd.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/bdd-275x300.png\" alt=\"bdd\" width=\"275\" height=\"300\" class=\"alignnone size-medium wp-image-2467\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/bdd-275x300.png 275w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/bdd.png 657w\" sizes=\"auto, (max-width: 275px) 100vw, 275px\" \/><\/a><\/p>\n<p>Jetons \u00e9galement un coup d\u2019oeil \u00e0 notre table StaffMember, qui repr\u00e9sente un membre du staff dans une \u00e9quipe :<\/p>\n<p><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/staff.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/staff-257x300.png\" alt=\"staff\" width=\"257\" height=\"300\" class=\"alignnone size-medium wp-image-2468\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/staff-257x300.png 257w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/staff.png 660w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/a><\/p>\n<p>La base de donn\u00e9es n\u2019est finalement pas quelque chose de compliqu\u00e9, mais il vaut toujours la peine de se poser et d\u2019y r\u00e9fl\u00e9chir sur papier avant de commencer \u00e0 la construire. Les bases de donn\u00e9es relationnelles sont parfois complexes, et on se retrouve vite \u00e0 appeler la table fille dans la table m\u00e8re, etc\u2026<\/p>\n<p>III &#8211; Workflows<\/p>\n<p>Les Workflows sont comparables \u00e0 des fonctions en code classique. Ils peuvent se d\u00e9clencher manuellement, ou lors d\u2019un \u00e9v\u00e9nement bien pr\u00e9cis sur la page ou en base de donn\u00e9es.<\/p>\n<p>Ils se comptent par milliers dans notre application, nous n\u2019allons donc pas tous les d\u00e9tailler ici.<\/p>\n<p>Mais prenons pour exemple toutes les actions ex\u00e9cut\u00e9es (voyons \u00e7a comme des fonctions, avec \u00e0 l\u2019int\u00e9rieur encore d\u2019autres fonctions) lors d\u2019un nouveau tour pour un joueur X :<\/p>\n<ul>\n<li>On red\u00e9finit la liste contenant l\u2019ordre des joueurs<\/li>\n<li>On d\u00e9finit le prochain joueur \u00e0 jouer.<\/li>\n<li>On l\u2019avertit<\/li>\n<li>On lui rend son staff qui aurait pu \u00eatre affect\u00e9 par un \u00e9v\u00e9nement court-terme (COVID, &#8230;)<\/li>\n<li>Si tour pair, on distribue un \u00e9v\u00e9nement au joueur.<\/li>\n<li>On calcule son nouveau capital (= capital + capital * 0.25)<\/li>\n<li>On incr\u00e9mente de 1 ses innovations, ou on les termine si elles doivent \u00eatre termin\u00e9es ce round-ci. SI on les incr\u00e9mente de 1, on lui verse ses revenus d\u2019innovations. Si elles sont termin\u00e9es, on lui rend son staff.<\/li>\n<li>On applique le salaire de ses employ\u00e9s<\/li>\n<li>On g\u00e8re ses formations : on incr\u00e9mente les tours, ou on lui rend son staff<\/li>\n<li>Et finalement, on lui calcule sur nombre r\u00e9el d\u2019I, U et T une fois que tout le monde est rentr\u00e9 d\u2019innovation \/ de formation \/ d\u2019\u00e9v\u00e9nement et que les bonus ont \u00e9t\u00e9 appliqu\u00e9s.<\/li>\n<\/ul>\n<p>Voici une infime partie de ce rouage, en capture d\u2019\u00e9cran :<\/p>\n<p><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/new_turn_be.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/new_turn_be-300x26.png\" alt=\"new_turn_be\" width=\"300\" height=\"26\" class=\"alignnone size-medium wp-image-2471\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/new_turn_be-300x26.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/new_turn_be-1024x90.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/new_turn_be-500x44.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/new_turn_be.png 1806w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>IV &#8211; Int\u00e9gration<\/p>\n<p>Comme dans tout projet web, nous avons cr\u00e9\u00e9 une maquette en amont, sur un logiciel de prototypage : Figma.<\/p>\n<p>Ici, rien de sorcier. Dans notre cahier des charges, nous n\u2019avions pas pr\u00e9vu que le jeu soit jouable sur mobile, et heureusement. Cela nous a \u00e9pargn\u00e9 beaucoup de travail.<\/p>\n<p>Pour r\u00e9aliser l\u2019int\u00e9gration dans Bubble, nous disposons de ces \u00e9l\u00e9ments : <\/p>\n<p><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/des.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/des-83x300.png\" alt=\"des\" width=\"83\" height=\"300\" class=\"alignnone size-medium wp-image-2472\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/des-83x300.png 83w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/des.png 263w\" sizes=\"auto, (max-width: 83px) 100vw, 83px\" \/><\/a><\/p>\n<p>Nous avons \u00e0 disposition du texte, des boutons, des champs pour entrer de la donn\u00e9e, des images, des formes, \u2026.<\/p>\n<p>Ensuite, un simple travail de cliquer-glisser nous permet d\u2019int\u00e9grer la maquette et d\u2019obtenir un r\u00e9sultat coh\u00e9rent.<\/p>\n<p>V &#8211; Conclusion<\/p>\n<p>En conclusion, nous pensons que nous avons plut\u00f4t bien men\u00e9 ce projet, premi\u00e8rement parce que nous avons r\u00e9alis\u00e9 dans le temps imparti chaque \u00e9tape du projet que l\u2019on s\u2019\u00e9tait fix\u00e9e.<br \/>\nEnsuite, nous arrivons finalement \u00e0 un r\u00e9sultat plus que convainquant. Nous avons r\u00e9ussi le d\u00e9fi que nous nous \u00e9tions lanc\u00e9 (qui n\u2019\u00e9tait pas gagn\u00e9 d\u2019avance), et avons produit un jeu fonctionnel, utilisable et lui avons donn\u00e9 une gigantesque marge de progression.<br \/>\nSi important dans un projet, la coh\u00e9sion de groupe nous a permis de rester motiv\u00e9s et concentr\u00e9s sur nos objectifs. Nous avons su organiser notre travail et le d\u00e9couper en une centaines de petites t\u00e2ches que nous nous sommes r\u00e9parties, dans un outil de gestion de projet.<br \/>\nLe fait de se conna\u00eetre et d\u2019avoir des affinit\u00e9s en dehors de l\u2019\u00e9cole nous a permis de conna\u00eetre nos forces et nos faiblesses, et nous avons ainsi pu attribuer \u00e0 chacun les t\u00e2ches o\u00f9 nous serons les plus performants.<\/p>\n<p>Pour Auxence et Wesley, Matis \u00e9tait tr\u00e8s pr\u00e9cieux car il poss\u00e9dait ce sens artistique qu\u2019il nous manquait. Or, dans le d\u00e9veloppement Web, l\u2019esth\u00e9tique d\u2019un site web (UX\/UI) joue \u00e9norm\u00e9ment sur le taux de rebond des utilisateurs.<\/p>\n<p>\u00c9tant d\u00e9veloppeur Freelance, Wesley \u00e9tait conscient des contraintes techniques que nous allions affronter. Il a su les mesurer et a estim\u00e9, en amont du projet, que nous avions environ 85% de chances de mener ce projet \u00e0 bien.<\/p>\n<p>Auxence nous coordinait \u00e0 merveille. Il poss\u00e8de le sens de la gestion d\u2019\u00e9quipe et sait exactement quelle t\u00e2che effectuer dans quel ordre pour que l\u2019on puisse se compl\u00e9ter au mieux. Il a jou\u00e9 un r\u00f4le essentiel, sans lequel Matis et Wesley se seraient probablement emm\u00eal\u00e9s les pinceaux.<br \/>\nSon pr\u00e9cieux bon sens nous a fait gagner du temps, et nous a souvent remotiv\u00e9 lorsque l\u2019on se heurtait \u00e0 des soucis que nous aurions tous qualifi\u00e9s d\u2019\u00e9liminatoire.<\/p>\n<p>Bien plus qu\u2019un projet d\u2019\u00e9cole, ce Serious Game pourrait r\u00e9ellement servir en entreprise. Pour nous trois, ceci est un livrable dont on se souviendra toute notre vie.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cLe but de ce projet est la conception et la r\u00e9alisation du mat\u00e9riel pour un serious game sur l\u2019innovation. Ce jeu qui a \u00e9t\u00e9 test\u00e9 lors de formation continue chez Renault a besoin d\u2019une conception plus approfondie en terme de &hellip; <a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/2021\/06\/18\/the-next-edison\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":77729,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[344],"tags":[],"class_list":["post-2231","post","type-post","status-publish","format-standard","hentry","category-344"],"_links":{"self":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/2231","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\/77729"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/comments?post=2231"}],"version-history":[{"count":0,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/2231\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/media?parent=2231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/categories?post=2231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/tags?post=2231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}