Universit´ e de la R´ eunion
M´ emoire de stage de Master 2 Informatique
Direction de l’Innovation et de l’Ing´enierie P´edagogique (D2IP)
P´eriode du stage : Du 20 janvier 2020 au 03 juillet 2020
Modernisation et extention du programme Immex
Auteur :
SALVAN Fabien M2 Informatique n ´etudiant : 34003149
Encadrant : M. Didier Sebastien Directeur de la D2IP
Responsable de stage : Pr. Fred´eric Mesnard Laboratoire d’Informatique et de Math´ematiques (LIM)
frederic.mesnard@univ-reunion.fr
Remerciement
Je tient `a remercier ma famille pour m’avoir soutenu durant ce stage
Je remercie aussi M. Didier SEBASTIEN, mon tuteur de stage, pour son encadrement ainsi que son soutien durant ce stage.
Je remercie ´egalement toute l’´equipe de la D2IP pour leur accueil et la bonne ambiance pen- dant ce stage.
R´esum´e
Il y a plusieurs ann´ees, afin de d´evelopper des moyens p´edagogiques innovants, l’Universit´e de la R´eunion et la DUN (pr´ed´ecesseur de la D2IP) ont lanc´e le programme Immex.
Cependant, afin de rester attractif, ce programme doit ˆetre constamment ´etendu via de nouveaux projets. De plus, leur site web a un grand besoin de modernisation, n’ayant jamais
´
et´e mis `a jour ni r´eorganis´e. Pour r´epondre `a ces probl´ematiques, une proposition de stage de fin d’´etude de 6 mois a ´et´e lanc´ee. Durant ces 6 mois, j’ai effectu´e plusieurs projets afin de r´epondre aux besoin de modernisation et d’extension de ce programme. Ce rapport va
d´ecrire en d´etail les tˆaches qui m’ont ´et´e assign´ees, les m´ethodes employ´ees afin d’y r´epondre, ainsi que les difficult´es que j’ai rencontr´e au cours de ce stage.
Mots-cl´es
Immex, S´erious Games, Wordpress, Unity, MOOC Abstract
Several years ago the University of Reunion Island attempted to develop new innovative pedagogic means. The DUN department started this development and launched the Immex
program. In order to stay attractive, this program needs to have new projects added on an ongoing basis. In addition, their website is in need of modernization as since it’s creation it has not been updated and maintained. To adress thoses problem, a 6 month internship war proposed to resolve all the issues, wich I accepted. In this time frame I succesully realised several project and brought the website up to current standards and have it ready for future
projects. This essay will describe in detail the tasks assigned to me, the means I used to solve them and the difficulties I faced during the process.
Key words
Immex, Serious Games, Wordpress, Unity, MOOC
Table des mati` eres
1 Introduction 5
1.1 Structure d’accueil . . . 5
1.2 Contexte . . . 6
1.2.1 Pr´esentation du programme Immex . . . 6
1.2.2 Probl´ematique . . . 7
1.2.3 Travaux `a r´ealiser . . . 7
2 Organisation et vie d’entreprise 7 2.1 Organisation . . . 7
2.2 Vie d’entreprise . . . 8
2.3 Organisation pendant la crise du Corona Virus . . . 8
3 Cr´eation d’une librarie sur RPG Maker 9 3.1 Pr´esentation de RPG Maker . . . 9
3.2 Cahier des charges . . . 10
3.3 G´en´eration de la cl´e . . . 10
3.4 R´ealisation . . . 11
3.4.1 Choice(Question, Choix) . . . 14
3.4.2 ShowKey() . . . 15
3.4.3 EncrypKey() . . . 16
3.4.4 Cryptage de la cl´e . . . 16
3.4.5 D´ecryptage de la cl´e . . . 17
3.5 Difficult´es rencontr´ees . . . 17
4 Modernisation et migration du site d’Immex 18 4.1 Pr´esentation de Wordpress . . . 19
4.2 Cahier des charges . . . 19
4.3 R´ealisation . . . 20
4.3.1 Utilisation d’un th`eme existant . . . 20
4.3.2 Cr´eation d’un th`eme personnalis´e . . . 22
4.3.3 Modification d’un th`eme existant . . . 25
4.3.4 Cr´eation de la maquette du site . . . 28
4.4 Migration sur le serveur d´efinitif . . . 30
4.5 Gestion des ressources externes . . . 32
4.6 Difficult´es rencontr´ees . . . 32
5 R´esolution de probl`emes sur le jeu Dodo Rush 33 5.1 Pr´esentation de Dodo Rush . . . 33
5.2 Probl`eme `a r´esoudre . . . 34
5.3 R´ealisation . . . 35
6 Travail restant 39
6.1 D´eploiement de Dodo Rush . . . 39
6.2 Finalisation et Installation du S´erious game Dodo Racing . . . 39
6.3 Pr´esentation de Dodo Racing . . . 39
6.4 Travail `a effectuer . . . 41
6.5 Mise `a jour et migration des autres projets Immex . . . 41
7 Travail annul´e 41
8 Conclusion 41
9 Perspectives 42
10 Annexe 43
11 Webographie 45
12 Bibliographie 45
1 Introduction
Dans le cadre de la validation du Master 2 Informatique, j’ai effectu´e un stage d’une dur´ee de 6 mois en entreprise. Ce rapport va servir `a pr´esenter ce travail. L’objectif de ce stage
´etait de moderniser l’un des programmes du service dans lequel j’ai travaill´e : le programme Immex. Pour ce faire, j’ai effectu´e plusieurs projets, allant de la cr´eation de librairies `a la refonte du site Web de ce programme. Dans ce m´emoire, je vais d’abord parler de la structure dans laquelle j’ai effectu´e mon stage, puis je vais d´etailler les diff´erents projets sur lesquels j’ai travaill´e, avant de conclure en faisant un bilan du travail r´ealis´e et de ce que cela m’a apport´e.
1.1 Structure d’accueil
Ce stage c’est d´eroul´e au sein de l’Universit´e de la R´eunion. Situ´e au coeur de l’oc´ean In- dien, cette universit´e attire les ´etudiants de toute la zone, accueillant plus de 16 000 ´etudiants et comptant un peu plus de 1200 salari´es. Un ´etablissement de cette taille est obligatoire- ment s´epar´e en plusieurs services, ayant chacun leur directeur, leur propre budget et leur rˆole. Le service dans lequel j’ai effectu´e ce stage est la D2IP (Direction de l’Innovation et de l’Ing´enierie P´edagogique)
Ce service a pour mission principale l’accompagnement p´edagogique et technologique. Il forme et guide les ´etudiants et personnels `a l’utilisation des services num´eriques que propose l’Universit´e de la R´eunion grˆace `a plusieurs dispositifs mis en oeuvre : portage et accompa- gnement de projets, production de ressources p´edagogiques, sessions de formations, accom- pagnement distanciel, organisation d’un tutorat TICE pour les ´etudiants. De plus, ce service est en charge du d´eveloppement du Syst`eme d’Informations P´edagogique : Au moyen d’une veille active, d’exp´erimentations continues et d’accompagnement de projets ambitieux, elle entretient une dynamique d’innovation p´edagogique pour l’´etablissement.
Figure2 – Principaux acteurs avec lesquels j’ai ´echang´e durant ce stage.
1.2 Contexte
1.2.1 Pr´esentation du programme Immex
Comme annonc´e pr´ec´edemment, durant ce stage j’ai travaill´e `a am´eliorer et moderniser le programme Immex. Ce programme, lanc´e par l’Universit´e de la R´eunion, plus pr´ecis´ement la DSI (Direction des Syst`emes d’informations, l’ancˆetre de la D2IP) a pour objectif l’exp´erimentation et la mise `a disposition de services innovants reposant sur des technologies de repr´esentation immersives (environement 3D). Cette technologie permet d’innover dans la p´edagogie, en mettant en place de nouveaux moyen d’apprentissages, sous la forme de s´erious games par exemple.
1.2.2 Probl´ematique
Cependant, ce Immex est ancien, et certaines parties de ce programme n’ont jamais connu de mise `a jour, tel que son site web ou le serveur sur lequel il est h´eberg´e. De plus, certains des projets les plus anciens lanc´es par ce programme utilisent des technologies aujourd’hui obsol`etes, ayant pour cons´equence un mauvais fonctionnement (bugs, crashs). Cela soul`eve donc la probl´ematique qui est donc le sujet principal de ce stage : Comment moderniser le programme Immex ?
1.2.3 Travaux `a r´ealiser
La r´eponse `a cette probl´ematique ne peut se r´esoudre en une r´eponse unique. Au contraire, plusieurs aspects distincts doivent ˆetre r´esolus, chacun pr´esentant leurs propres d´efis :
— Continuer d’´etendre le programme en y ajoutant un nouvel axe de d´eveloppement : En effet, jusqu’`a pr´esent, Immmex s’est concentr´e sur l’immersion dans des environne- ments en 3D, mais il doit aussi s’adapter `a l’´evolution des besoins. Or, en ce moment, un nouvel axe de d´eveloppement prend de l’ampleur : les MOOCS. Grˆace `a l’exp´erience d´ej`a acquise dans le d´eveloppement de S´erious Games, il a ´et´e d´ecid´e de cr´eer des MOOCS innovants, pr´esent´es sous forme de jeux. Cela permet, contrairement `a une
´
evaluation classique, d’immerger le joueur en situation ”r´eelle” correspondant `a ce qu’il a appris dans le MOOC. Cependant, le d´efi est d’arriver `a ´evaluer le joueur `a travers ce jeu, en fonction de ces actions.
— Moderniser le site web d’Immex : le site web d’Immex est la vitrine du programme ´etant l’endroit ou les gens viennent consulter les projets r´ealis´es, les objectifs du programme, etc. Or, ce site n’as jamais ´et´e modernis´e, ce qui peut donner une mauvaise impression aux visiteurs.
— Mise `a jour des anciens projets : Comme dit pr´ec´edemment, les projets les plus anciens utilisent des technologies obsol`etes, non support´ees par les navigateurs moderne, ayant pour cons´equence des bugs, voir des projets ne marchant pas du tout. Il est donc important de mettre en avant les projets les plus r´ecents et fonctionnels, tout en migrant les anciens projets vers des technologies plus r´ecentes, et supprimer totalement ceux dont la migration n’est pas possible. (Ou du moins de les mettre dans une cat´egorie
`
a part, et non pas mis en avant comme c’est le cas dans la version actuelle).
2 Organisation et vie d’entreprise
2.1 Organisation
L’organisation durant ce stage se faisait de la mani`ere suivante : Chaque semaine se tenait une r´eunion, durant laquelle on discutait de l’avancement effectu´e durant la semaine pr´ec´edente, des probl`emes rencontr´es, etc. En fonction de l’avancement, des nouveaux objectifs
´etaient ensuite fix´es pour la semaine `a venir. Ensuite, le travail durant la semaine ´etait en
Bien que les grands objectifs du stage ´etaient annonc´es d`es le premier jour, cette m´ethode permet de prendre en compte des impr´evus, ou d’ajouter des objectifs non pr´evu au d´epart sans bouleverser la totalit´e du planning.
2.2 Vie d’entreprise
L’ambiance dans le service dans lequel s’est d´eroul´e ce stage ´etait bonne : j’´etais bien int´egr´e au service, pouvais discuter/d´ebattre de sujets divers avec les autres membres, on me demandait mon avis sur certaines questions, assistais aux r´eunions. Cela m’a permis d’ap- prendre, en plus des comp´etences techniques dues au stage, comment fonctionne la vie en entreprise.
De plus, je participait `a la vie du service, en effectuant des missions de ”tutorat”. En accord avec les missions de la D2IP, le tutorat consiste `a ouvrir la salle dans laquelle on travaillait aux ´etudiants, lesquels pouvaient venir nous voir pour r´esoudre des probl`emes en relation avec les services num´eriques de l’Universit´e. En temps normal, ce service est assur´e par des tuteurs, des ´etudiants volontaires employ´es `a temps partiel. Cependant, cette ann´ee, le service est pass´e par une importante r´eorganisation (le service pr´ec´edent a ´et´e s´epar´e en deux services distincts), ce qui a eu pour cons´equence des incertitudes, en autre sur le budget allou´e aux tuteurs. Pour cette raison, pendant la dur´ee de mon stage, aucun tuteur n’´etait pr´esent, et on nous a donc attribu´e cette responsabilit´e. Cependant, conscient que des interruptions r´ep´et´ees dans notre travail pouvaient porter pr´ejudice `a l’avancement de notre stage, il a ´et´e d´ecid´e de n’ouvrir ce service que 3 demis journ´ees par semaine.
2.3 Organisation pendant la crise du Corona Virus
La crise du Corona virus n’a heureusement que peu impact´e mon stage. La majorit´e des tˆaches que j’ai eu `a effectuer n’´etaient pas d´ependantes de machine ou d’´equipement pr´esent sur mon lieu de stage. Ce stage s’est donc poursuivi depuis chez moi sur ma machine personnelle. Les points r´eguliers ont continu´e `a se d´erouler, par mail ou par t´el´ephone au lieu d’en pr´esentiel. Mˆeme le tutorat a continu´e `a se d´erouler, par le biais de tickets en ligne. Le principal impact que cette crise a eu sur mon travail a ´et´e pendant les 2 premi`eres semaines : En effet, une des tˆaches qui m’a ´et´e confi´ee doit ˆetre r´ealis´ee sur un serveur distant, accessible seulement depuis le r´eseau de l’Universit´e. Afin de pouvoir y travailler depuis chez moi, il fallait installer un VPN et le configurer pour que je puisse avoir acc`es a ce serveur.
Cependant, des probl`emes techniques ont retard´e ce processus : le VPN me connectait bien au r´eseau de l’Universit´e mais je n’avais pas d’acc`es au serveur, puis la cl´e SSH g´en´er´e
´etait inutilisable. Ces diff´erents probl`emes ont mis un certain temps afin d’ˆetre identifi´es et r´esolus.
3 Cr´ eation d’une librarie sur RPG Maker
Mon service a re¸cu plusieurs demandes afin de mettre en place des MOOCS, et il a ´et´e d´ecid´e pour se faire d’exp´erimenter l’id´ee de les mettre sous forme de S´erious games, o`u l’´etudiant serait ´evalu´e sous forme de mise en situation o`u il aurait `a utiliser les connaissances apprises durant le MOOC. En plus d’ˆetre ludique, ce moyen d’´evaluation a l’avantage d’´evaluer les performances de l’´etudiant dans une situation concr`ete, pouvant repr´esenter une situation r´eelle, et non pas juste sous la forme d’un QCM, bien plus abstrait. Un tel syst`eme permet aussi de d´evelopper plus de mani`ere d’´evaluer l’´etudiant (par exemple en ´evaluant ses actions lors d’une mise en situation, contrairement `a juste v´erifier si il connais par coeur son cours).
Cependant, le syst`eme de notation doit ˆetre aussi fiable et concret qu’un QCM classique.
Pour r´epondre `a ces besoins, il `a ´et´e d´ecid´e d’utiliser le moteur de jeu RPG Maker, dont il est possible de modifier le fonctionnement pour l’adapter `a nos besoins grˆace `a l’utilisation de librairies. ´Etant donn´e qu’une librairie r´epondant `a ces besoin n’existait pas, il m’a ´et´e confi´e la tˆache de la cr´eer.
Figure3 – Fonctionnement du MOOC 3.1 Pr´esentation de RPG Maker
Figure 4 – Logo de RPG Maker
RPG maker est une s´erie de moteur de jeu, dont le but principal est (mais pas limit´e)
`
a la cr´eation de jeux de rˆoles. L’utilisation de RPG Maker se veut simple, grˆace `a une in- terface intuitive, et ´evite aux utilisateurs d’avoir recours `a de la programmation. La plupart des versions comprennent un ´editeur de carte, un language de script simple (principalement par interface graphique). Cependant, des utilisateurs avanc´es peuvent y ajouter des scripts personnalis´es, afin de modifier le comportement du moteur de jeu `a leur guise.
RPG maker a ´et´e choisi car contrairement aux projets pr´ec´edents r´ealis´es par Immex, le but n’est pas simplement de cr´eer un s´erious game, mais de cr´eer un outil permettant `a des per- sonnes non form´ees en informatique de cr´eer leur s´erious game. Cet outil `a donc ´et´e choisi
`
a la place de moteurs plus avanc´es, mais aussi beaucoup plus complexex, comme Unity par
3.2 Cahier des charges
Apr`es discussion avec mon tuteur afin de me renseigner sur les besoins de mon service, j’ai pu isoler les principaux objectifs `a accomplir :
— La librairie cr´ee doit ˆetre facilement utilisable par une personne non form´ee en infor- matique, mais form´ee `a l’utilisation de RPG Maker
— La librairie doit permettre d’enregistrer certaines actions effectu´ees par le joueur.
— Le cr´eateur du S´erious game doit pouvoir pr´eciser quels actions enregistrer.
— A la fin du jeu, une cl´e doit ˆetre g´en´er´ee en fonction des actions effectu´ees. C’est cette cl´e qui va ensuite servir `a l’´evaluateur pour notation.
— Cette cl´e doit ˆetre crypt´ee, pour ´eviter des tricheries.
— Un outil de d´ecryptage doit ˆetre fourni `a l’´evaluateur, afin de visualiser la cl´e en clair.
— Une option de ”debug” doit permettre d’afficher la cl´e en clair pendant la phase de d´eveloppement.
3.3 G´en´eration de la cl´e
Afin de g´en´erer la cl´e, j’ai d´ecid´e de partir sur le principe suivant, similaire `a un QCM : Chaque action marqu´ee par le cr´eateur du s´erious game correspond `a une ”question”, et les diff´erents choix que l’utilisateur peut faire correspond `a une r´eponse. Chaque question a une lettre assign´ee, et chaque r´eponse un nombre, formant un ”bloc” de ce format : ”A1”, ”B3”, ect. Ensuite, chaque bloc est assembl´e bout `a bout afin de former la cl´e finale.
Figure5 – Construction de la cl´e
Cependant, contrairement `a un QCM, les ”r´eponses” `a chaque ”questions” ne se trouvent pas forc´ement au mˆeme moment. Par exemple, bien que l’´ev`enement A peut ˆetre d´efinit uniquement par un choix effectu´e `a un moment unique ( r´epondre oui ou non par exemple), l’´ev`enement B peut ˆetre d´efinit par le contenu de l’inventaire du joueur `a la fin. La valeur de l’´ev`enement B peut donc alors d´ependre de plusieurs actions effectu´ees durant le d´eroulement du jeu. L’avantage de cette architecture de cl´e est d’ˆetre facilement lisible par le correcteur, tout en permettant une souplesse dans la mani`ere d’´evaluer.
3.4 R´ealisation
Afin de comprendre comment j’ai r´ealis´e cette librairie, il est important de comprendre comment fonctionne RPG Maker, ´etant donn´e que mon objectif est d’en modifier le comporte- ment en y ajoutant de nouvelles fonctionnalit´es. Cela est aussi n´ecessaire afin de comprendre comment ma librairie va interagir avec l’utilisateur et le reste des fonctionnalit´es existantes.
Comme pr´ecis´e dans la pr´esentation, RPG Maker permet de cr´eer des jeux sans avoir `a ef- fectuer la moindre interaction avec du code. Les fonctionnalit´es permettant de cr´eer un RPG (Role Playing Game ou jeu de rˆole) sont d´ej`a impl´ement´ees par d´efaut (d´eplacement des personnages, gestion de l’inventaire, des capacit´es, etc), l’utilisateur n’a plus qu’`a cr´eer son sc´enario.
Afin de cr´eer un sc´enario, le joueur doit pouvoir interagir avec son environnement, et pour cela, RPG Maker propose ce qu’on appelle des ´ev`enements.
Figure6 – Fenˆetre d’´ev`enement
Comme on peut le voir, un ´ev`enement se ”programme” enti`erement en interface graphique, qui est s´epar´ee en plusieurs parties :
— Conditions : Cette partie permet de d´efinir les diff´erentes conditions pour que l’´ev`enement apparaisse sur l’´ecran de jeu.
— Image, Mouvement, Options : Ces options permettent de d´efinir l’apparence de l’´ev`enement.
Bien que certains ´ev`enements doivent ˆetre invisibles (par exemple d´eclencher une ac- tion si le joueur franchit une certaine case), les ´ev`enements peuvent aussi prendre l’apparence de personnages afin de d´eclencher des dialogues, de portes pour changer de zone, etc.
— D´eclencher : D´etermine la mani`ere dont l’´ev`enement est d´eclench´e, cela peut ˆetre manuellement par le joueur, automatiquement si le joueur marche dessus, d`es que le joueur entre dans la sc`ene, etc.
— Contenu : Le contenu de cette partie va s’ex´ecuter quand l’´ev`enement est d´eclench´e.
C’est ici qu’on va programmer l’´ev`enement. Le ”langage” utilis´e est simple `a com- prendre : On peut voir que cette fenˆetre va proposer un choix au joueur : Aider ou Ignorer.
Figure7 – Ex´ecution de l’´ev`enement
Afin de programmer un ´ev`enement, RPG Maker propose plusieurs pages d’options, per- mettant de r´epondre `a quasiment tout les besoins rencontr´es pour faire un RPG. Toutes ces options se configurent par interface graphique, sauf une : La commande ”Script”. Comme son nom l’indique, cela permet de rentrer des lignes de codes `a l’int´erieur de l’´ev`enement. C’est par cette commande que la librairie que j’ai cr´ee communique avec le reste du moteur de jeu.
Figure8 – Fenˆetre d’´ev`enement
Une fois ceci compris, j’ai pu passer `a la r´ealisation de la librairie en elle mˆeme. Pendant ce stage, j’ai du cr´eer cette librairie pour 2 versions de RPG Maker : VX et MV. Ces 2 versions sont radicalement diff´erentes :
— La programmation sur VX se fait en Rubi, et l’environnement de programmation est directement int´egr´e `a RPG Maker.
— La programmation sur MV se fait en JavaScript, et la programmation se fait dans un fichier `a part, qui est ensuite ins´er´e dans les fichiers du projet.
Personnellement, j’ai trouv´e la programmation sur MV et JavaScript beaucoup plus simple,
´etant plus familier avec Java Script qu’avec Rubi. Cela m’a permis d’ajouter des fonctionna- lit´es par rapport `a VX. De plus, la programmation dans un fichier `a part rend l’exportation de la librairie beaucoup plus ais´e. Cependant, programmer sous VX ou MV n’a pas chang´e l’architecture du plugin, qui est d´ecompos´e en 3 fonctions principales.
3.4.1 Choice(Question, Choix)
Cette fonction est celle qui permet de d´esigner quelles actions doivent ˆetre enregistr´ees.
Quand un ´ev`enement d´eclenche cette fonction, cela va l’enregistrer dans une liste, dont la position dans la liste correspond `a la ”question” correspondante, et la valeur enregistr´ee va correspondre `a la ”r´eponse”.
Figure 9 – Exemple d’utilisation de Choice
Reprenons l’exemple de choix : On remarque que si le joueur choisit d’aider le personnage, Choice(0,1) va s’ex´ecuter, et si il l’ignore,Choice(0,1)va s’ex´ecuter `a la place. Le premier argument est identique dans les 2 cas, car les 2 choix repr´esentent la question 0 (not´ee A pour la cl´e). Cependant, le choix aider correspond `a la r´eponse 1, alors que le choix ignorer correspond `a la r´eponse 2. La librairie ne fait pas la distinction entre les bonnes et les mauvaises r´eponses, elle se contente d’enregistrer des choix. C’est le correcteur, une fois en possession des r´eponses via la cl´e qui lui aura ´et´e envoy´ee, qui va attribuer les points correspondants en fonction de sa fiche de correction. De plus, chaque question ne peut avoir qu’une r´eponse
`
a la fois. Si la fonction Choice est `a nouveau ex´ecut´ee avec comme question assign´ee 0, la nouvelle r´eponse va ´ecraser l’ancienne. Il est aussi `a noter que les r´eponses s’enregistrent
”silencieusement”, sans que le joueur s’en doute, afin de ne pas casser l’immersion, et que les
´etudiants ne localisent pas les questions importantes, afin d’obtenir uniquement la r´eponse `a cette question et de n´egliger le reste.
Pour finir, vu que cette fonction s’ex´ecute dans un ´ev`enement, cela offre une grande possibilit´e de choix sur lesquels ´evaluer le joueur.
D’un point de vue technique, cette fonction est simple : elle assigne les valeurs de r´eponses dans un liste pr´ed´efinie, donc la position dans la liste correspond au num´ero de question.
Le fait d’avoir une liste pr´ed´efinie a pour inconv´enient de limiter le nombre total de question disponibles (8 dans notre cas). Cependant, en discutant avec mon tuteur, il est ressortit que les S´erious games pr´evus seront en g´en´eral court, et que 8 questions seront largement suffisantes pour leurs besoins. Cela permet de garder la fonction extrˆemement simple, et donc de limiter le nombre d’´el´ements qui pourraient conduire `a un bug. Les valeurs sont initialis´ees `a -1, ce qui permet de dire `a la fonction de g´en´eration de cl´e de sauter ce bloc, ´etant vide.
3.4.2 ShowKey()
Cette fonction a pour but de faciliter le debugging lors de la cr´eation du S´erious game. La cl´e finale apparaissant uniquement `a la fin et ´etant crypt´ee, cela rend impossible de v´erifier si elle se cr´ee correctement au cours du jeu. Cette fonction est la pour pallier `a ce probl`eme, en permettant aux d´eveloppeurs de suivre en temps r´eel la construction de leur cl´e apr`es chaque action.
Figure10 – Affichage de la cl´e en clair.
Cependant, il est `a noter que le d´eveloppeur du S´erious Game doit s’assurer de supprimer toute pr´esence deShowKey()au moment de sortir le jeu en version finale : Le fait de voir la cl´e en clair au moment du jeu rend compl`etement inutile le fait de la crypter `a la fin. Encore pire, cela peut permettre aux ´etudiants les plus d´etermin´es de comprendre le fonctionnement du cryptage de la cl´e.
3.4.3 EncrypKey()
Cette fonction ne doit ˆetre utilis´ee que une fois, pour marquer la fin du S´erious game. Elle effectue plusieurs actions
— Cr´eation de la cl´e finale, avec la mˆeme fonction utilis´ee par la fonctionShowKey().
— Cryptage de cette cl´e.
— Affichage de la cl´e Crypt´ee, ainsi que sa copie dans le presse papier, permettant un transfert plus ais´e vers le correcteur.
— Affichage d’un message de conclusion.
Le point le plus int´eressant de cette fonction est le Cryptage, les autres fonctionnalit´es ´etant plutˆot basique ou d´ej`a ´evoqu´ees.
3.4.4 Cryptage de la cl´e
Bien plusieurs m´ethodes sont pertinentes, il a ´et´e d´ecid´e de partir sur une m´ethode simple, permettant d’ˆetre rapidement mise en place afin de passer au plus vite aux autres tˆaches importantes. La logique derri`ere ce raisonnement est que mˆeme si la m´ethode est simple et en th´eorie facile `a craquer, cela est suffisant pour dissuader les ´etudiants, n’ayant pour la plupart aucune connaissance en cryptographie, de tenter de craquer la cl´e.
La m´ethode utilis´ee consiste donc en 2 cl´es, une utilis´ee pour les chiffres et une utilis´ee pour les lettres.
Figure11 – M´ethode de cryptage
Chacune des lettres de chaque cl´e est ensuite remplac´ee par le num´ero correspondant `a sa position dans l’alphabet, puis ajout´ee `a chaque ´el´ement de la cl´e non crypt´ee, qui va ensuite ˆetre d´ecal´ee du nombre correspondant.
Figure12 – Cl´e crypt´ee 3.4.5 D´ecryptage de la cl´e
Une fois la cl´e crypt´ee transmise `a l’examinateur, celui ci doit avoir un moyen afin de la d´ecrypter. Pour cela, on m’a demand´e de cr´eer une page Web permettant de le faire. Cette tˆache a ´et´e plutˆot facile, la m´ethode de cryptage ´etant connue et sym´etrique : le d´ecryptage se fait en appliquant la m´ethode de cryptage `a l’envers. La plus grande difficult´e a ´et´e de
”parser” la cl´e crypt´ee afin de s´eparer les diff´erents blocs `a d´ecrypter.
Figure13 – Outil de d´ecryptage.
3.5 Difficult´es rencontr´ees
Bien que la prise en main de RPG Maker a ´et´e relativement ais´ee, cr´eer une librairie a
´et´e une tˆache plus ardue, ´etant donn´e que la majorit´e des documentations et forums portent sur l’utilisation en interface graphique. La documentation sur la mani`ere de programmer,
4 Modernisation et migration du site d’Immex
La deuxi`eme grande tˆache qui m’a ´et´e assign´ee est la modernisation ainsi la migration du site du programme Immex vers un nouveau serveur. En effet, le site web d’Immex fait office de vitrine pour les visiteurs, ´etant le seul point d’acc`es vers le programme ainsi que ces projets. Or, ce site n’as jamais ´et´e modernis´e depuis sa cr´eation et cela peut donner une mauvaise impression aux visiteurs. Il est donc important de moderniser ce site, afin de donner une meilleure apparence `a Immex.
Figure14 – Site Immex avant modifications.
Mon objectif est donc de recr´eer ce site, en tentant de le moderniser tout en l’adaptant `a la charte de l’Universit´e pour les sites Web, ainsi que de r´eorganiser le site afin de rendre les menus plus lisibles et intuitifs. Pour ce faire, et afin d’assurer la maintenabilit´e du site dans le futur, l’outil choisit pour cette tˆache est Wordpress.
4.1 Pr´esentation de Wordpress
Figure15 – Logo de Wordpress
Wordpress est un syst`eme de gestion de contenu (CMS) qui permet de cr´eer et de g´erer facilement un site ou un blog. Dans Wordpress, l’apparence du site et son contenu sont tota- lement ind´ependants : Cela signifie que l’on peut ´ecrire le contenu des pages sans se soucier de leur apparence, ´etant donn´e qu’on peut facilement la modifier et que cela va automatique- ment s’appliquer pour toutes les pages du site. Pour ce faire, Wordpress contient une s´erie de ”th`emes” : Un th`eme est un ensemble de script permettant d’habiller la page web, sur le- quel vient ensuite se greffer le contenu. De plus, toutes les modifications se font par interface graphique : Les gestionnaires du site disposent d’une interface sp´ecifique, prot´eg´ee par mot de passe, qui leur permet d’apporter les modifications souhait´ees au site. Selon leur statut, ils peuvent modifier tout ou une partie des contenus, des th`emes et/ou des fonctionnalit´es install´ees.
4.2 Cahier des charges
Apr`es discussion avec mon tuteur afin de connaˆıtre ses besoins pour ce nouveau site, j’ai pu isoler les diff´erents objectifs `a accomplir :
— Le site doit ˆetre agr´eable `a regarder.
— Le site doit r´epondre `a la charte de l’Universit´e, afin que les visiteurs comprennent que programme Immex est affili´e `a l’universit´e de la R´eunion.
— menu de navigation
— barre de recherche
— logo de l’universit´e
— Le site doit ˆetre install´e sur le nouveau serveur.
— Une documentation sur le d´eploiement du nouveau serveur doit ˆetre fournie, indiquant les logiciels install´es pour ce faire, les diff´erents identifiants, ainsi que la structuration du serveur.
— Une maquette(organisation des menus et sous menus) du nouveau site doit ˆetre pro- pos´ee, puis mise en place.
4.3 R´ealisation
La r´ealisation de cette tˆache a ´et´e longue et s’est faite en plusieurs ´etapes. En effet au moment de la r´ealisation de cette tˆache, je n’avais aucune exp´erience avec Wordpress, et une exp´erience lointaine sur le d´eveloppement web et le web design. Ce manque d’exp´erience dans le domaine a fait que je ne suis pas parti directement vers la solution la plus efficace pour r´epondre au cahier des charges, et j’ai du donc exp´erimenter plusieurs fa¸con de faire jusqu’`a trouver la meilleure. Cependant, ceci a ´et´e une exp´erience enrichissante qui m’a beaucoup appris et m’a fait gagner en exp´erience. Cette partie va donc parler des diff´erentes ´etapes par lesquelles je suis pass´e, gagnant un peu plus d’exp´erience `a chaque fois, jusqu’`a arriver au site final, r´epondant `a tout les crit`eres du cahier des charges.
4.3.1 Utilisation d’un th`eme existant
La premi`ere phase, la plus intuitive en utilisant Wordpress, est de chercher dans la bi- blioth`eque de th`emes un th`eme se rapprochant le plus possible du cahier des charges, puis tenter de le modifier via l’interface graphique, afin de l’adapter `a mes besoins. Apr`es une phase de recherche et d’exp´erimentation, un th`eme suffisamment proche a ´et´e trouv´e, le th`eme Blos- som Fashion.
Figure 17 – Th`eme Blossom Fashion
Bien que ce th`eme semble `a premi`ere vue tr`es ´eloign´e des attentes, il a cependant la quasi totalit´e des ´el´ements recherch´es : une barre de recherche, le titre du site, un emplacement pour ajouter un logo, et un menu de r´eseau sociaux, qui semble `a premi`ere vue facilement convertible en menu de navigation de l’universit´e. En effet, en modifiant certaines options d’affichage et le CSS du th`eme (le CSS est modifiable directement via l’interface graphique), le r´esultat semble prometteur :
Figure 18 – Th`eme Blossom fashion modifi´e
Cependant, on peut constater qu’il manque le menu de navigation de l’Universit´e, un des crit`eres du cahier des charges. Malgr´e mes efforts, je n’ai trouv´e aucun moyen de convertir le menu des r´eseaux sociaux en menu de l’universit´e : En effet, les icˆones disponibles dans ce menu sont limit´ees, et je n’ai pas trouv´e de moyens d’en ajouter de nouvelles dans la liste d’icˆones propos´ees.
D’autres approches ont ´et´e tent´ees, comme cr´eer un menu classique (affichant du texte), et y injecter du code HTML pour remplacer le texte par une image. Cependant, bien que cette technique fonctionne pour certains endroits (menu principal par exemple), elle ne fonctionne pas pour les menus secondaires. De plus, le th`eme ne disposait pas d’emplacement de menus secondaire `a l’emplacement voulu.
Etant donn´´ e qu’il me restait du temps avant la r´eunion avec mon tuteur, j’ai d´ecid´e de me renseigner sur la possibilit´e de cr´eer un th`eme, ce qui me permettrait de faire un th`eme personnalis´e et optimis´e pour les contraintes impos´ees : En effet, le th`eme Blossom Fashion est complexe ´etant donn´e qu’il inclus un grand nombre de fonctionnalit´es, mais dont la plupart sont inutiles pour le nouveau site d’Immex.
4.3.2 Cr´eation d’un th`eme personnalis´e
En faisant des recherches, je me suis rendu compte que la cr´eation d’un th`eme basique est similaire `a une page web classique : un th`eme est compos´e d’HTML, de CSS ainsi que de PHP. Cependant, contrairement `a un site web classique, on ne remplit pas directement le contenu de la page (titre, corps de l’article, ect). A la place, on utilise des fonctions propres
`
a Wordpress, qui vont permettre d’indiquer `a quel endroit ins´erer le contenu en question.
Figure19 – Prototype de th`eme
Bien que ce th`eme soit extrˆemement basique, cela m’a permis de voir que la cr´eation d’un th`eme enti`erement personnalis´e est possible.
Cependant, un th`eme cr´ee de cette mani`ere est rigide : il n’offre pas autant d’options de personnalisation via l’interface graphique qu’un th`eme d´ej`a existant, or c’est ce qui fait l’int´erˆet de Wordpress et la raison pour laquelle il a ´et´e d´ecid´e d’utiliser cet outil. Si des mo- difications, mˆeme minimes doivent ˆetre faite dans le futur, il faudra aller modifier directement les fichiers du th`eme, ce qui pose des probl`emes de maintenabilit´e.
L’´etape suivante a donc ´et´e d’apprendre comment rendre ce th`eme personnalis´e compatible avec l’interface graphique de Wordpress. Comme pour le contenu de la page, cela s’effectue en ins´erant des fonctions php aux endroits que l’on souhaite rendre modifiable via l’interface graphique. Par exemple, pour pouvoir changer le titre du site depuis l’interface graphique, on remplace le titre dans la page HTML par la fonctionSiteTitle()
Avec ces nouvelles connaissances, j’ai pu faire un deuxi`eme prototype de th`eme, avec plus d’´el´ements esth´etiques, ainsi qu’une compatibilit´e basique avec Wordpress.
Figure 20 – Prototype de th`eme am´elior´e
Cependant, `a ce stade, plusieurs probl`emes majeurs sont pr´esents :
— Le temps : Cr´eer un th`eme enti`erement personnalis´e prend une quantit´e de temps cons´equente.
— De plus, afin d’avoir un th`eme enti`erement fonctionnel, il faut cr´eer une page adapt´ee pour une grande quantit´e d’´eventualit´es : r´esultat de la recherche, page d’aide, erreur, etc. Cela prendrait un temps consid´erable et empˆecherait la r´ealisation des autres tˆaches pr´evues.
Figure 21 – Agencement d’un th`eme Wordpress
Chaque rectangle gris de la figure ci-dessus correspond `a une page sp´ecifique pour laquelle il faut programmer le th`eme.
— Bien que cela m’ait permis d’int´egrer les ´el´ements manquant du cahier des charges, l’apparence g´en´erale du site n’en est pas grandement am´elior´ee.
— Malgr´e mes efforts, des probl`emes majeurs subsistent : les menus s’affichent dans le d´esordre, certains sous menus sont dans la mauvaise cat´egorie, ect.
— La possibilit´e de personnalisation depuis l’interface graphique reste minime : cela se limite au titre et au contenu des menus (qui s’affichent ensuite dans le d´esordre) Face `a ces probl`emes et apr`es discussion avec mon tuteur, il a ´et´e d´ecid´e de repartir sur l’utilisation de th`emes existants, mˆeme si cela implique que le cahier des charges ne soit pas compl`etement rempli.
4.3.3 Modification d’un th`eme existant
Le temps pass´e `a se renseigner sur les th`emes de Wordpress n’a cependant pas ´et´e perdu : bien que cr´eer un th`eme personnalis´e serait trop long `a r´ealiser dans la dur´ee allou´ee, cela m’a permis de mieux comprendre l’organisation des th`emes existants. Grˆace `a ces nouvelles connaissances, j’ai donc pu tenter de modifier le th`eme utilis´e en premier lieu afin de pouvoir l’adapter au cahier des charges.
Cependant, le th`eme choisit est bien plus complexe qu’un th`eme standard : cette com- plexit´e est du au grand nombre d’options de personnalisation disponibles, mais malgr´e cette complexit´e, j’ai pu apporter les modifications n´ecessaires :
Figure22 – Th`eme Wordpress modifi´e et adapt´e aux besoins
Mais ces modifications ont engendr´e de nouveaux probl`emes :
— La modification du th`eme a engendr´e des bugs et des comportements impr´evus du th`eme
Figure 23 – Barre de copyright apparaissant en plein milieu du site
— La police de certains ´el´ements est compliqu´ee `a changer, et la police par d´efaut ne s’int`egre pas bien dans le site
— Le surlignage des menus est en rose, et tout comme la police, ceci ne se fond pas avec le reste du site.
Figure24 – Surlignage rose
Mis `a part les copyright apparaissant au milieu du site, les probl`emes demeurent mineurs, et bien que non optimal, je pourrais proposer ce site `a mon tuteur. Cependant, vu qu’il me restait du temps disponible pour cette tˆache, j’ai d´ecid´e de chercher de nouveaux th`emes, afin de v´erifier si il en existe des plus facilement modifiables. De plus, cela me permet d’avoir plusieurs propositions `a soumettre.
Figure 25 – Th`eme suits
Mon choix pour cela s’est port´e sur le th`eme ”Suits”, ayant un aspect plus moderne et plus sobre compar´e au th`eme pr´ec´edent. De plus, une inspection du code montre qu’il est beaucoup plus simple que Blossom Fashion, ce qui le rend plus simple `a modifier. Ceci, combin´e `a l’exp´erience acquise dans la modification du th`eme pr´ec´edent, a fait que la modification du th`eme `a ´et´e rapide, simple, et n’a pas caus´e de bugs.
Figure26 – Suits apr`es modification
Le seul point non modifiable a ´et´e la couleur du menu principal. Cependant, ce point n’´etait pas dans le cahier des charges, et ne pose pas de probl`emes majeurs au niveau esth´etique.
Je me suis donc retrouv´e avec 2 th`emes `a proposer, chacun avec leurs avantages et in- conv´enients. Au final, c’est la proposition 2 avec le th`eme ”Suits” qui a ´et´e adopt´ee, et j’ai pu donc passer `a l’´etape suivante.
4.3.4 Cr´eation de la maquette du site
L’´etape suivante est de refaire l’organisation des menus du site. J’ai donc ´et´e charg´e de cr´eer plusieurs maquettes pour le nouveau site.
Figure 27 – Organisation de l’ancien site
Pour ce faire, je suis parti sur 2 pistes diff´erentes :
— Conserver et am´eliorer l’organisation actuelle : L’organisation actuelle du site, bien qu’ayant quelques d´efauts, est tout de mˆeme bien faite. Son principal d´efaut est de mettre en avant des prototypes de projets non fonctionnels, encombrant les menus et portant pr´ejudices aux projets plus r´ecents et fonctionnels. Cette proposition garde donc l’organisation actuelle, mais en envoyant les prototypes obsol`etes dans une nou- velle cat´egorie, ”Ancien prototype”, et en mettant les prototypes les plus r´ecents dans les menus, les rendant moins encombr´es et plus lisible.
Figure28 – Proposition 1
— La deuxi`eme piste est de compl`etement repenser l’organisation du site. En effet, je me suis rendu compte que les diff´erents projets pr´esent´es peuvent se regrouper en 3 grandes cat´egories : Les visites des diff´erents campus en ext´erieur(Moufia, PTU, IUT), celles de diff´erents bˆatiments en int´erieur (salle des serveurs, salle multim´edia) et les S´erious Games. Ce regroupement permet un menu plus compact et plus explicatif des rˆoles des diff´erents projets. Faire un menu compact permet aussi de ne pas avoir un menu principal qui s’´etend sur 2 lignes diff´erentes, ce qui le rend plus esthetique.
Figure29 – Proposition 2
Au final, le choix s’est port´e sur la proposition 2, en y int´egrant certaines modifications :
— Menu Contact : Le menu Contacts est quasiment vide, ayant juste le nom et mail du responsable du programme Immex. Il est donc plus judicieux de placer ce contenu en pied de page.
— Organisation des sous menus : A la base, chaque projet est d´ecompos´e en 3 pages :
— Pr´esentation du projet
— La page contenant le prototype
— Pr´esentation de l’´equipe.
La maquette propos´ee ne contient pas cette distinction, les 3 pages ´etant fusionn´ees dans la mˆeme page. Cependant, mon tuteur pr´ef´erait garder ces menus. Cependant, une telle organisation encombrerait encore plus que sur l’ancienne maquette. Afin de palier `a ce probl`eme, il a ´et´e d´ecid´e de les int´egrer, en sous menu de niveau 3 (sous sous menu).
4.4 Migration sur le serveur d´efinitif
Une fois le site cr´ee et son contenu organis´e, l’´etape suivante a ´et´e de le migrer sur son serveur d´efinitif. Le serveur, une machine distante accessible uniquement par SSH depuis notre salle de travail, fonctionne sous Debian, et ´etait initialement compl`etement vierge.
Ma tˆache `a donc ´et´e d’installer et de configurer le n´ecessaire afin d’h´eberger le nouveau site web ainsi que les projets du programme Immex. De plus, il m’a ´et´e demand´e de documenter toute cette ´etape, afin de pouvoir maintenir et ´eventuellement ´etendre les fonctionnalit´es du serveur dans le futur. Pour r´epondre `a ces besoins, j’ai donc d´ecid´e d’installer un serveur LAMP.
LAMP est ensemble de logiciels libres permettant de construire des serveurs de sites web.
Cette configuration `a l’avantage d’ˆetre gratuite et disponible sur la plupart des distributions Linux. Il est constitu´e de 4 parties :
— Linux : Le syst`eme d’exploitation
— Apache : Le serveur Web
— MySQL : La base de donn´ees
— PhP : le language script utilis´e
Figure30 – LAMP
Une fois install´e,l’´etape suivante est l’installation de Wordpress. Une fois t´el´echarg´e et d´esarchiv´e, le reste de l’installation se fait en interface graphique.
Figure 31 – Installation de Wordpress
4.5 Gestion des ressources externes
Une fois LAMP et Wordpress install´es, l’´etape suivante est de g´erer les ressources, le site d’Immex h´ebergant et utilisant un grand nombre d’entre elles (vid´eo, jeux, scripts devant ˆetre accessible depuis l’ext´erieur, images). Il est donc important de savoir comment stocker et organiser ces ressources, afin d’assurer la maintenabilit´e du site, en facilitant le remplacement ou l’ajout de ressources. De plus, partir depuis une base organis´ee permet d’´eviter de d´eplacer les ressources dans le future, ce qui aurait pour cons´equence de devoir remplacer le chemin dans tout les projets les utilisant, le cas ´ech´eant conduisant `a des bugs ou dysfonctionnement.
Figure32 – Organisation des ressources 4.6 Difficult´es rencontr´ees
Les difficult´es rencontr´ees lors de cette partie ont ´et´e nombreuses :
— Wordpress : Bien que Wordpress permet en temps normal de cr´eer un site facilement grˆace au syst`eme de th`emes, le cahier des charges imposait des crit`eres assez pr´ecis, qu’aucun th`eme propos´e ne remplissait compl`etement. Cela a eu comme cons´equence de devoir modifier un th`eme, qui s’est r´ev´el´e beaucoup plus complexe.
— Documentation : La documentation sur la programmation de th`eme est peu fournie.
De plus, il y a peu de forum sur le sujet, la communaut´e de Wordpress ´etant plutˆot tourn´ee vers l’utilisation de l’interface graphique. Cela a compliqu´e mes recherches sur la cr´eation et la modification de th`eme, ce qui a r´esult´e d’un allongement du temps pass´e sur cette tˆache.
— Corona Virus : L’´epid´emie de Corona Virus a frapp´e en plein milieu de cette partie, et a eu pour cons´equence de retarder le d´eploiement sur le serveur d´efinitif. Effectivement, il a fallu se r´eorganiser afin d’avoir un acc`es au serveur depuis chez moi. Plusieurs probl`emes (de connexion et de cl´e SSH) on retard´e cette ´etape, bloquant plusieurs tˆaches pendant ce laps de temps.
5 R´ esolution de probl` emes sur le jeu Dodo Rush
L’´etape suivante est de mettre `a jour et de peaufiner les diff´erents prototypes de projets pr´esent´es sur le site d’Immex, de r´esoudre les probl`emes si ils se pr´esentent, puis les migrer sur le nouveau serveur. Cela a commenc´e par le S´erious game Dodo Rush.
5.1 Pr´esentation de Dodo Rush
”Dodo Rush” est un s´erious game cr´ee dans le cadre du programme Immex. Le principe est simple : Le but du jeu est de trouver dans une reproduction 3D du campus du Moufia des ´etudiants cherchant `a rejoindre un lieu pr´ecis (salles de classe, bˆatiment administratif, etc), et de les y conduire, grˆace `a une soucoupe volante volant `a quelques m`etres du sol. Le joueur dispose d’un temps limit´e pour atteindre le plus haut score disponible. Pour ce faire, chaque ”course” accomplie rapporte des points , ainsi que du temps suppl´ementaire. Quand le d´ecompte se termine, la partie est arrˆet´ee, et le score final est affich´e. L’int´erˆet de ce s´erious game est de faire d´ecouvrir le campus du moufia ainsi que ces points d’int´erˆets de mani`ere ludique.
Figure 33 – Dodo Rush
5.2 Probl`eme `a r´esoudre
Afin d’inciter le cot´e comp´etitif des joueurs, le jeu contient un tableau des scores, stockant le score et les noms des meilleurs joueurs.
Figure 34 – Tableau des scores pendant le d´eveloppement
Le tableau des scores est stock´ee dans une base de donn´ees sur un serveur distant. Pen- dant la phase de d´eveloppement, le serveur ´etait h´eberg´e localement sur la machine de d´eveloppement, et fonctionnait correctement. Cependant, quelque temps apr`es la migration du jeu et du serveur sur leur plate-forme d´efinitive, ce tableau des scores a fini par cesser de fonctionner.
Figure35 – Tableau des scores une fois le projet d´eploy´e
5.3 R´ealisation
La premi`ere ´etape `a ´et´e de de localiser la source du probl`eme. Or, comme on peut le voir sur ce sch´ema, le probl`eme peut venir de plusieurs endroits :
— Le script cot´e client
— La connexion entre le client et le serveur
— Le script cot´e serveur
— La connexion entre la base de donn´ees et le serveur
— La requˆete SQL
Pour pouvoir localiser la source du probl`eme, la solution a ´et´e de tester le tableau des scores depuis Unity, en y int´egrant des options de debugs afin que l’erreur apparaisse dans la console.
Figure 37 – Erreur constat´ee
Il s’est av´er´e que le probl`eme se trouve dans la connexion entre le client et le serveur. Une fois le probl`eme localis´e, l’´etape suivante est d’en d´eterminer la cause, et j’ai pu constater que l’url `a laquelle le client tente d’acceder n’existe tout simplement pas.
Figure 38 – L’url n’existe pas
Cependant, le serveur contact´e existe bien, les autres pages et ressources ´etant accessibles depuis cette adresse. Le probl`eme ne venait donc pas du client lui mˆeme, mais du serveur : les scripts auxquels le client tentait de se connecter semblent avoir ´et´e d´eplac´es.
5.4 Migration du serveur
Etant donn´´ e que le probl`eme ne venait pas du client mais d’un probl`eme de script d´eplac´e cot´e serveur, je suis donc pass´e `a l’´etape suivante : Migrer le tout(client, serveur et base de donn´ees) sur le nouveau serveur d’Immex. Par la mˆeme occasion, cela m’a permis de r´egler ce probl`eme script d´eplac´e : Contrairement au serveur actuel, j’ai b´en´efici´e d’un acc`es total au nouveau serveur, ´etant donn´e que je me suis occup´e de son installation et de sa configuration.
J’ai donc pu m’assurer que les scripts sont plac´es au bon endroit. Comme dit pr´ec´edemment, la migration de la partie serveur est s´epar´ee en 2 ´el´ements :
— La base de donn´ees : Comme vu `a la figure 36, le client prend les informations n´ecessaires `a la cr´eation du tableau des scores sur une base de donn´ees. Mˆeme si cette base de donn´ees est basique (1 table), cette migration `a tout de mˆeme requit plusieurs ´etapes :
— R´ecup´eration de l’ancienne base de donn´ees
— Cr´eation d’un nouvel utilisateur pour acc´eder `a cette base de donn´ees. Cela est une mesure de s´ecurit´e pour ´eviter des attaques d’autres bases de donn´ees via le jeu.
— Importation de la base de donn´ee sur le nouveau serveur.
— Les scripts serveur : Ceux ci sont compos´es de 2 scripts php, un servant `a enregistrer un nouveau score et l’autre servant `a les r´ecup´erer. Ceux ci ont ´et´e plus simples `a migrer que la base de donn´ees, cependant, il a fallu les modifier pour prendre en compte les nouveaux identifiant et nouvelle adresse sur le nouveau serveur, sur chacun des scripts. J’en ai donc profit´e pour effectuer des modifications afin de les rendre plus facile `a maintenir : Pour cela, j’ai rassembl´e les informations de connexion, qui sont identiques pour ces 2 scripts dans un fichier de configuration s´epar´e.
Figure 39 – informations de connexion
De cette mani`ere, les futures modifications soit sur le serveur soit sur la base de donn´ees se feront sur un fichier unique facilement accessible, au lieu de devoir aller le modifier sur chaque script
5.5 Tests
Une fois la migration de la partie serveur effectu´ee, et avant d’uploader la version compil´ee du jeu, j’ai d’abord effectu´e des tests, en changeant l’adresse cible cot´e client. Cependant, une nouvelle erreur s’est manifest´ee :
Figure 40 – erreur lors des tests
Cependant, contrairement `a l’erreur pr´ec´edente, la nature de l’erreur n’est pas d´etaill´ee, mise `a part qu’elle est situ´ee du cot´e du serveur. La r´esolution de ce probl`eme a du se faire en
5.6 S´ecurisation de l’´echange client/serveur
Le fait de r´esoudre le probl`eme du tableau des scores m’a fait r´ealiser que l’´echange entre le client et le serveur peut ˆetre facilement exploitable par des personnes mal intentionn´ees : Les arguments sont envoy´es directement via l’URL, et en clair. Si une personne arrive `a deviner l’URL des scripts cot´e serveur, elle pourrait introduire des faux scores de cette mani`ere(ce qui ruinerait l’int´erˆet du S´erious games pour les joueurs honnˆetes), voir d’y introduire des commandes malveillantes dans la base de donn´ees (en utilisant une requˆete SQL a la place du score par exemple). J’en ai donc profit´e pour ajouter un minimum de s´ecurisation dans cet
´echange : Une cl´e secr`ete est d´etermin´ee, puis donn´ee au client et au serveur. Lors de l’envoi des informations vers le serveur, le client calcule un ”hash”. Ce hash est cr´ee avec une m´ethode appel´ee MD5, en prenant comme argument les donn´ees envoy´ees (nom, score), ainsi que la cl´e secr`ete. Ce hash est ensuite envoy´e avec les reste des donn´ees. Lorsque le serveur re¸coit les donn´ees, il va cr´eer son propre hash avec la mˆeme m´ethode, qu’il va ensuite comparer avec le hash re¸cu. Si les donn´ees n’ont pas ´et´e alt´er´ees, les deux hash vont correspondre, et le script va continuer comme pr´evu. Dans le cas contraire, il n’y aura pas de correspondance, et le serveur va simplement ignorer les donn´ees.
6 Travail restant
Ce rapport ´etant r´edig´e 1 mois avant la date de fin du stage (le 7 juillet), certaines tˆaches n’ont pas encore ´et´es r´ealis´ees :
6.1 D´eploiement de Dodo Rush
Maintenant que les tests ont ´et´e effectu´es, l’´etape suivante sera de migrer la partie client sur le serveur, afin de pouvoir ˆetre accessible depuis le site web, puis de v´erifier `a nouveau que tout fonctionne.
6.2 Finalisation et Installation du S´erious game Dodo Racing
Le prochain projet d’ampleur `a d´eployer sur le serveur sera le S´erious game Dodo Racing.
Dodo Racing est le 2`eme s´erious game cr´ee dans le cadre du programme Immex, et tout comme Dodo Rush, `a ´et´e mon sujet de TER. Tout comme Dodo Rush, Il me faudra installer ce jeu sur le serveur d´efinitif d’Immex. Cependant, le travail sera plus cons´equent, ´etant donn´e que ce projet est plus complexe que Dodo Rush.
6.3 Pr´esentation de Dodo Racing
Le but de ce s´erious game est de r´ealiser des courses dans une repr´esentation 3D du campus du Moufia. Les courses sont compos´ees de points de passages, repr´esent´es sous la forme de cercles, `a travers lesquels l’utilisateur doit passer. Ces points de passages forment le circuit de la course. Les diff´erents circuits ne sont pas plac´es au hasard, ayant plutˆot comme objectif de faire d´ecouvrir aux joueurs des points d’int´erˆets du campus : Par exemple, une course permettant de reproduire le circuit n´ecessaire pour s’inscrire `a l’universit´e. Les utilisateurs seront ensuite class´es selon leur temps. Plus le temps est court, mieux ils seront class´es. Ce projet, bien qu’´etant dans la continuit´e du jeu DodoRush, est bien plus complexe :
— Il est compos´e de plusieurs applications distinctes, l’´editeur de niveau et le jeu lui mˆeme. Cela rend les tests plus complexes, ´etant donn´e qu’il faut s’assurer que les 2 parties fonctionnent ind´ependamment, et ensemble. Par exemple, si un niveau est mal g´en´er´e, le probl`eme peut aussi bien venir du client, du serveur, ou de l’´editeur de niveau.
— La partie en ligne est beaucoup plus complexe : L’´editeur de niveau doit pouvoir envoyer une sauvegarde de course au serveur, le serveur doit d´eterminer si c’est une nouvelle course, ou bien une ancienne course `a ´ecraser, le client doit pouvoir r´ecup´erer les courses, envoyer et r´ecup´erer les scores pour chaque course, ect.
Figure41 – ´Echanges clients serveur
Les parties ”DB Manager” et ”Scripts Php” de ce sch´ema sont simplifi´ees afin de pouvoir rentrer sur ce sch´ema : chacune de ces parties contient une dizaine de scripts, une par fonction n´ecessaire : envoi d’une course (une course est constitu´ee de plusieurs points de passages, ayant chacun des coordonn´ees et un num´ero), r´ecup´eration d’une course, envoi des temps pour chaque course, ect.
6.4 Travail `a effectuer
Le travail `a effectuer sur ce s´erious game est similaire `a l’´etape pr´ec´edente : La migration vers le nouveau serveur Immex, ce qui comprend de faire les adaptations n´ecessaires pour palier au changement de login et d’adresse, s´ecuriser l’´echange client serveur, installer le jeu sur le nouveau serveur et faire des tests pour d´etecter d’´eventuels probl`emes, et les r´egler si il y en a.
6.5 Mise `a jour et migration des autres projets Immex
Le dernier point ce de stage sera de migrer les autres projets vers le nouveau serveur.
Cette ´etape devrait ˆetre plus facile ´etant donn´e que ces projets n’ont pas de partie en ligne.
Cependant, cette tˆache pourrait ˆetre compliqu´ee par les points suivants :
— Ces projets sont anciens : Plus il y a de d’´ecart entre la version d’Unity utilis´ee lors de leur d´eveloppement et la version actuelle, et plus il y a de risque d’incompatibilit´e.
— Compr´ehension du code : Contrairement aux 2 s´erious games d´ecris pr´ec´edemment, le d´eveloppement a ´et´e effectu´e par des personnes tierces. Cela veut dire qu’en cas de probl`eme, cela va prendre du temps suppl´ementaire afin de comprendre le fonctionne- ment du prototype. De plus, ces projets sont pour la plupart complexes, ´etant des jeux en 3D en temps r´eel dans des grands environnements. Il y a donc beaucoup d’´el´ements complexes interagissant les un avec les autres. De plus, chacun de ces projets ayant ´et´e d´evelopp´es par des ´equipes diff´erentes, la phase de compr´ehension du code devra ˆetre r´eit´er´ee pour chaque projets.
7 Travail annul´ e
Une seule tˆache a ´et´e annul´ee durant ce stage : Il s’agissait d’un groupe d’´etudiants de l’IUT de la R´eunion qui a demand´e de l’aide `a notre service afin de cr´eer un projet de r´ealit´e augment´ee. Ayant d´ej`a une exp´erience avec Unity, on m’a donc demand´e d’aider ces ´etudiants en faisant un suivi r´egulier, ainsi que d’´evaluer la r´ealisation de leur projets. Une prise de contact initiale par mail avait d´ej`a ´et´e envoy´ee afin de leur demander plus d’informations sur leur projet. Cependant, je n’ai jamais eu de r´eponse de leur part, et apr`es discussion avec mon tuteur de stage, qui n’a jamais re¸cu de r´eponse non plus, il a ´et´e d´ecid´e d’annuler ce travail et de se concentrer sur d’autres tˆaches.
8 Conclusion
Au moment de la r´edaction de ce rapport, une bonne partie des objectifs initiaux, qui
´etaient de moderniser et de redynamiser le programme Immex, ont ´et´e r´ealis´es. La cr´eation d’outils afin de cr´eer des MOOC sous la forme de s´erious game a ´et´e faite, v´erifi´ee et une documentation sous la forme d’un tutoriel pour l’utilisation par des personnes non habitu´ees
Le reste des projets est en cours de r´ealisation, avec encore 1 mois pour finaliser la tˆache.
Le seul point incertain `a ce niveau concerne la mise `a jour des projets anciens : la crise du corona virus fait que je n’ai pas encore re¸cus les codes sources afin de travailler dessus. Une fois les sources re¸cues, le temps pour r´ealiser cette tache reste incertain : si aucun probl`eme de compatibilit´e entre version est d´etect´e, leur remise `a niveau et migration sur le nouveau serveur sera simple et rapide. Le cas ´ech´eant, si trop de probl`emes se posent ou si la mise a jour est impossible dans un temps raisonnable (par exemple la refonte enti`ere du code afin de palier au changement de version) Dans un tel cas, la tˆache ne seras pas effectu´ee, et j’en expliquerait les raisons.
D’un point de vue personnel, ce stage m’as beaucoup appris : Ce stage de fin de Master contenait plusieurs tˆaches couvrant chacune des domaines radicalement diff´erents les uns des autres : D´eveloppement de librairies, d´eveloppement web, administration syst`eme, r´esolution de probl`emes, cr´eation de tutoriels. Bien que j’aurai pr´ef´er´e un unique projet suffisamment cons´equent pour durer 6 mois et ´etant dans mon domaine plutˆot que plusieurs petits projets, je me rend compte que ce stage m’as permis de prendre plus confiance en moi dans des domaines dans lesquels je ne me sentais pas `a l’aise `a la base (d´eveloppement web, administration syst`eme).
9 Perspectives
La totalit´e des projets a ´et´e r´ealis´e dans l’optique de cr´eer une base facilement maintenable, ceci afin de supporter au mieux les besoins futurs du programme Immex : la structure du site et de la librairie RPG Maker est d´etaill´ee et document´ee, afin de faciliter le plus possible l’int´egration de nouvelles ressources non pr´evues en ce moment. De plus, l’optique de s´ecurit´e a ´et´e pens´ee : utilisateurs s´epar´es pour les base de donn´ees, mot de passes forts et diff´erents pour chaque aspects, s´ecurisation des ´echanges sur les s´erious games.
10 Annexe
Figure 42 – Code de la librairie RPG Maker
Figure43 – Diagramme de Gantt de l’organisation du stage
11 Webographie
— Site de la D2IP :https://numerique.univ-reunion.fr/
— Site d’Immex :http://immersion.univ-reunion.fr/wordpress/
— Site officiel de RPG Makerhttps : /www.rpgmakerweb.com/
— Site officiel de Wordpresshttps://wordpress.com/
— Site officiel d’Unity : https://unity.com/
— Description de la m´ethode MD5 : https://www.ietf.org/rfc/rfc1321.txt
— Fonction MD5 utilis´ee :https://docs.microsoft.com/fr-fr/dotnet/api/system.
security.cryptography.md5?view=netframework-4.8
12 Bibliographie
— D. S´ebastien, O. S´ebastien, N. Conruyt, ”Providing services through online immersive real-time mirror-worlds. The Immex Program for delivering services in another way at university”, 20th Virtual Reality International Conference (VRIC 2018), ACMSIG- GRAPH, 2018.
— D. Sebastien, O. Sebastien, N. Conruyt, ”e-Campus : a MMORPG providing e-Services to campus users”, International Journal of Intelligent Games Simulation, IJIGS 2008, Ed. by : Q. H. Mehdi, Stephane Natkin and Ian Marshall, pp 16-21, web-based pu- blication of the University of Wolverhampton UK in association with The Society for Modelling and Simulation - Europe, ISSN : 1477-2043, 2008.
