Mar 30, 2021
Rapport TFE #3
Mise en place de l’inventaire
Pour cette nouvelle semaine, pas mal de petites choses sont prévues ! Je dis «pour cette nouvelle semaine», même si en vrai, le jour même de la remise du dernier rapport de TFE, j’ai profité de ma soirée pour finaliser la partie concernant la création de l’inventaire de l’utilisateur.
Pour rappel, l’inventaire de l’utilisateur pourra être utilisé pour y stocker des objets tels que des clefs qui lui seront utiles pour la bonne continuation du jeu.
Je suis donc parti sur la réalisation d’un inventaire en forme de cercle, je dois avouer avoir vu cette idée de burger menu via une vidéo de la chaîne YouTube «Le Designer du Web».
L’avantage de ce menu est qu’il est visuel, comme vous pouvez le remarquer sur la photo ci-dessous, les éléments s’y trouvant dedans sont mis en évidence tout en laissant une bonne vue sur le reste du site.
Un souci de ce genre de type de menu est qu’il ne permet que d’accueillir au grand maximum 3 items. Une fois ce nombre atteint, celui-ci se retrouve complet … Cependant, ce petit problème n’est guère important dans mon cas puisqu’au contraire il me permet de temporiser le jeu de l’utilisateur et de l’empêcher qu’il ne s’éparpille dans mon site !
Un début de semaine sur les chapeaux de roues
Pour cette nouvelle semaine je décide dans un premier temps de passer en revue la documentation que Mr. Hoebregts m’a présentée et envoyée lors des suivis TFE.
Celle-ci se concentre sur la création des paramètres passés dans les URL: vous savez, le fameux “?lang=fr”
Au cours de mon entretien avec Mr. Hoebregts j’ai parlé des retours qui avaient été faits lors de l’entretien avec Mr. Di Stefano et Mr. Thronte concernant le partage de mon site web afin de challenger ses amis. Mon but est de créer un lien de partage vers mon site au futur utilisateur qui lui indiquerait le temps que son ami a mis pour résoudre le puzzle.
Je lui avais dit être assez perdu puisque je ne voyais pas trop comment coder tout cela en dehors du PHP, langage de programmation que je voyais mal utiliser en raison de sa faible présence et utilisation sur mon site.
Assez rapidement monsieur Hoebregts m’a parlé de l’utilisation des paramètres dans les URL. Ces derniers pourront être utilisés afin de stocker le temps que l’utilisateur a fait lors de sa partie sur le site. Une fois cette URL partagée, l’ami de l’utilisateur qui se connectera en cliquant sur le lien de partage pourra voir le temps de son ami grâce au paramètre stocké dans cette URL.
Ainsi, si vous veniez à finir le jeu en 10:25:63, l’url du site étant:
- nathannoel.be/projets/tfe
deviendrait:
- nathannoel.be/projets/tfe?time=10:25:63.
Néanmoins monsieur Hoebregts me fait part d’un problème majeur: à tout moment l’utilisateur pourra modifier son temps si ce dernier connaît l’utilisation des paramètres. Du coup il va falloir passer par un cryptage de ce fameux paramètre.
Inventaire encore et toujours
En fin de semaine, je décide également de finir la création de l’inventaire de l’utilisateur en travaillant enfin sur l’interaction: Énigme trouvée -> l’utilisateur remporte une clé.
Après un peu plus de 2h je finis par terminer la fonctionnalité. Le début fut assez simple à coder néanmoins j’ai dû revoir ma manière de procéder en cours de travail … En effet afin de rendre mon code un maximum optimisé je me suis rendu compte que ma manière de procéder allait peut être poser problème dans la suite du jeu !
J’explique !
J’avais dans l’idée de rendre mon interaction fonctionnel de cette manière:
- L’utilisateur trouve la réponse, le jeu crée un élément dans mon inventaire. Cet élément serait un li
- Au moment d’utiliser une clé dans le jeu, le site vérifie si l’inventaire de l’utilisateur possède bel et bien une clé, si oui, le code s’exécute et le “li” est supprimé. Si non, le code ne s’exécute pas.
Mais comme indiqué ci-dessus, cette manière de procéder ne convenait pas au bon déroulement de la suite de la création du petit jeu.
Ma nouvelle manière de procéder est un point plus complexe:
Afin de vous expliquer de la meilleure façon possible, je suis obligé de vous parler avant tout de ce que je vais appeler le “game_structure”.
Le game_structure est un objet javascript dans lequel se déroule le bon fonctionnement de la partie.
Je ne vais pas rentrer dans les détails du code, cependant je vais parler de la ligne 106 “userInventory”, cette clé est associée à un tableau vide.
- C’est dans ce même tableau que viendra s’ajouter dans un premier temps l’item qu’obtiendra l’utilisateur une fois l’énigme résolue.
- Une fois cet item ajouté, le jeu créera un li qui viendra s’ajouter dans l’inventaire de l’utilisateur.
- Au moment d’utiliser une clé dans le jeu, le site vérifie si l’objet javascript possède bel et bien un tableau “userInventory” contenant une clé, si oui, le code s’exécute, l’item se supprime du tableau “userInventory” et le “li” est supprimé également. Si non, le code ne s’exécute pas.
Parlons Responsive:
Il est temps pour moi de passer à la création d’une Landing Page Responsive. Je n’ai pas codé de manière responsive la première fois parce que c’était avant tout un essai de mon côté.
Il est donc enfin temps de finir cela avant les tests MVP en début de semaine prochaine !
Après 3h30, quelques soucis liés au fait de ne pas avoir codé en responsive dès le début, la landing page est enfin terminée !
J’ai parlé des tests MVP ci-dessus, il se trouve que fin de semaine j’ai dû faire l’analyse de celui d’une étudiante, si vous désirez le découvrir il vous suffit de suivre ce lien: Éclipse- Un TFE d’Hélène Goffinet.
Place à la présentation
Le test étant réalisé et mon medium étant écrit, il est temps de réaliser les slides qui me serviront pour la présentation orale de mon avis sur le MVP que j’ai du tester la veille !
Avant mon tour, ça a été à Marie-Joséphine de présenter son avis sur mon MVP !
Je suis ravi de voir que mon MVP lui a réellement plu. Au cours de sa présentation Marie-Joséphine a développé pas mal de points, elle a fait part de ce qu’elle aimait bien, de ce qu’elle aimait moins ainsi que des différents petits soucis présents sur le site que ça soit sur la Landing Page ou bien sur le site du jeu directement.
Je vous laisse découvrir son article medium ici: Mea — Analyse du MVP.
En effet ces dernières sont bien trop faibles ! Il va falloir que j’y travaille dans les jours à venir afin de corriger tout cela. En tout cas, encore un grand merci à elle pour son analyse !
Voilà qui termine la rédaction de ce 3ème rapport de stage. Les 2 semaines qui arrivent vont s’annoncer énergiques:
- Correction des problèmes soulevés par Marie-Joséphine.
- Création du lien de partage pour challenger ses amis.
- Création d’une nouvelle énigme.
- Terminer le contenu de la Landing Page.
