Ego Fabula est un projet personnel qui me tient à cœur. En effet, il s’agit d’un prototype de jeu de rôle multi-joueurs. Vous y incarnez un habitant des mers qui doit collaborer avec les autres joueurs pour sauver le Royaume des Océans.
Le client a été réalisé à l’aide du moteur de jeux-vidéo Unity, et la partie serveur fonctionne à l’aide de Mirror Networking.
Une capture d’écran de mon jeu en ligne
L’ensemble fonctionne sur une machine virtuelle Ubuntu, avec une base de données MySQL coordonnée avec le système utilisateur de WordPress et son API Rest.
Les modèles 3D ont été créés avec le logiciel open-source Blender.
Le jeu n’est pas encore tout prêt, mais j’aime bien y travailler sur mon temps libre !
Parmi mes projets personnels les plus fous se trouve une idée un peu farfelue.
Il y a quelques année de cela, durant l’année 2016, je me suis passionné pour une dimension très spécifique de l’informatique, à savoir l’accès à l’information.
Je me suis alors intéressé au fonctionnement de moteurs de recherche dédiés aux web. Alors si il existe plein de moteurs de recherche aujourd’hui, celui qui détient le monopole aux Etats-Unis et en Europe est bien évidemment Google. Egérie des Start-ups Garages et autres disrupteurs du dimanche, c’est aujourd’hui un portail rassemblant plus qu’un outil de recherche de page web, mais bien un assortiment de data-centers et de compétences permettant de dompter les flux de données à l’échelle mondiale.
Mais si nous revenons à la base du concept de moteur de recherche, c’est une tout autre idée bien que la vision reste la même.
Derrière un moteur de recherche tel qu’ils existaient dans la fin des années 90, il y a trois entités bien distinctes. Pour ce cas d’usage, je développerai le fonctionnement d’un moteur de recherche web très basique.
Le Crawler, l’explorateur du web
Tout d’abord, il y a le Crawler, aussi appelé Spider. C’est un logiciel qui se balade de page en page pour enregistrer l’ensemble des données associées. Il y lit le contenu, en déduit les mots clés associés, y recense l’ensemble des liens vers lesquels la page courante redirige. Finalement, il fait exactement ce que son nom nous induit. On peut alors imaginer une petite araignée parcourant le web et traçant sa toile. Chose important à noter: notre araignée robotisée, avant de pénétrer dans la page web, est tenu de lire un fichier robot.txt qui lui dit ou non si elle a le droit d’accéder ou d’enregistrer la page en question.
Une fois notre page web traitée, notre araignée poursuit son chemin en allant suivre les autres liens.
L’index: stocker l’information
Chaque page visitée par notre araignée est inscrite dans une base de donnée appelée l’index, qui regroupe l’ensemble des données relative à la page web. Les pages sont recensées dans l’index et sont couplées à leurs indice de pertinence: le pagerank.
Le Pagerank: classer l’information
Par la suite, c’est au pagerank de récupérer ces données brutes et de noter la page web en conséquence.
Il va d’abord enregistrer sa pertinence en comptant le nombre de lien qui redirigent vers cette page. Puis, il lui donner un score arbitraire en fonction de la pertinence des pages de ces liens sources.
Aujourd’hui, il existe des normes dédiées au SEO (Search Engine Optimisation, ou Optimisation pour le référencement naturel), à l’accessibilité et aux standards. Par exemple, si votre site est doté d’une bannière en flash avec des polices de caractères clignotantes tout en omettant d’être lisible sur un téléphone, c’est compliqué de se frayer un chemin vers la première page de résultats.
Le Pageranker va également associer ces pages aux mots clé les plus pertinents.
Un champs de recherche cache parfois autre chose
Enfin, il y a le front, qui est le site web ou l’application permettant d’interroger notre index.
En 2016, je rêvais déjà de construire un petit moteur dédié à la recherche web. Hélas, il me manquait à ce moment quelques notions qui m’ont empêché de programmer l’outil de mes rêves.
A ce moment là, j’ai donc travaillé sur un méta-moteur de recherche !
Un méta-moteur de recherche, c’est un site ou une application qui (de base) n’a ni crawler, ni index. En effet, ce système se contente d’aller piocher chez la concurrence les résultats de recherche pour les ressortir sur une page avec un autre logo.
Du coup, à ce moment là, puisque je n’avais pas les compétences en programmation, j’ai décidé de travailler une autre partie tout aussi interessante: l’interface utilisateur.
Je me suis donc appliqué à repenser l’ensemble avec les moyens du bord.
L’idée derrière ce projet était alors d’imaginer une nouvelle forme d’expérience utilisateur axée sur l’idée de personnifier le logiciel. Inspirée par les mascottes de Microsoft Word comme Clippy qui conseillait l’utilisateur sur son usage du traitement de texte, Toast était voué à servir de visage à l’éternelle page blanche ornée du champs de recherche qui fait la réputation de l’internet.
Au delà le l’interaction sommaire, le personnage servirait également de champs de recherche qui s’affiche au gré des requêtes de l’utilisateur.
Mon objectif dans la réalisation de ce projet était de moderniser la manière dont l’utilisateur interagit avec son outil. C’était alors l’époque où les applications permettant d’échanger avec la machine avec leurs voix. Après tout, la voix de Siri permet de donner une dimension palpable à l’outil qu’on utilise. Humaniser un logiciel permet à mon sens de capter une nouvelle audience en ajoutant une couche de simplification au dessus d’un outil déjà simplifié à l’extrême.
Avant cela, j’avais déjà travaillé sur une autre mouture de l’interface du moteur un peu plus proche de ce qui existait déjà.
Parcourir le web, un lien à la fois
Maintenant, parlons de mon projet qui remonte à deux ans (en 2020 donc). A cet instant, je m’intéresse beaucoup moins à l’interface utilisateur, mais bien à la technologie derrière les outils que j’utilise au quotidien.
J’ai le besoin de mieux comprendre comment faire tourner un vrai crawler.
Et pour cela, la première idée qui me vient à l’esprit est littéralement une boucle récursive: un moulin qui ne s’arrête jamais puisqu’il persiste à parcourir toutes les branches d’un arbre dont la hauteur n’est probablement pas un représentable par un nombre raisonnable.
Du coup, j’ai commencé à la dure ! Une boucle récursive est initialisée par un appel de l’utilisateur au format ligne de commande. Par la suite, une partie du code (au format Objet) se connecte à notre base de donnée pour être rappelée autant de fois que nécéssaire en écriture. La boucle va ajouter ou modifier les valeurs dans notre base de donnée correspondant à la page web et dont la clé est pour le moment le lien hypertexte de notre page.
L’outil que j’ai développé est disponible sur Netneer.com !
Ce que j’en ai appris
Tout cela, en plus de me servir d’exercice, m’a permis d’entrevoir les limites des outils que j’utilisais alors, mais aussi les contraintes qui en découlent.
D’abord, le language JAVA est un langage séduisant et robuste, mais condamné à tourner sur une machine virtuelle appelée JVM (JAVA Virtual Machine). Cette dernière est une machine à gaz, opaque et dont on ne peut percevoir le fonctionnement de l’extérieur. En gros, c’est une boite noire qui n’est pas du tout optimisée pour mon idée, puisqu’à terme, je veux pouvoir faire des Threads de mes différents Crawlers pour faire tourner plusieurs araignées en parallèle. Ce qui fait que sur une machine donnée, je veux pouvoir avoir un maximum de threads qui tournent en parallèle, et qui soient orchestrés par un outil plus automatisable qu’un appel de commande.
Ensuite, il y a la base de données que j’utilisais: une base MySQL toute simple. Mais encore une fois, ce n’est pas ce que je veux pour manipuler de grandes quantités de données de manière plus souple, tout en imaginant un système de classification qui soit plus performant qu’un simple attribut. De plus, j’imagine que si une base MySQL est amplement suffisante pour faire tourner un site classique, ce n’est pas le meilleur outil pour l’application de mes rêves.
Je pense me tourner à terme vers une solution en C plus plus. Mais j’hésite encore, et comme je vois de nouveaux langages apparaître régulièrement, je pense avoir l’opportunité de découvrir de nouvelles manières de construire le moteur de recherche de mes rêves !
Conclusion
J’essaie de découvrir de nouvelles technologies à apprivoiser très régulièrement, et mes projets personnels sont pour moi l’un des meilleurs moyens de rester à la page.
Je trouve néanmoins que l’évolution de mon petit projet personnel m’encourage à en apprendre plus !
Il y a des histoires que personne n’a envie d’entendre.
Des histoires qui fascinent, qui répugnent, qui passionnent.
Et aujourd’hui, je veux vous présenter le prélude de mon histoire: BACKRUN.
Le projet
Ce projet, je rêve de le faire depuis des années: j’ai déjà trois version du projet qui précèdent celle-ci.
J’ai choisi de la developper au format jeu vidéo sous le moteur de jeu Unity.
BACKRUN est un jeu vidéo d’aventure mixant une composante de gameplay shooter à la troisième personne, et une dimension plateforme.
Vous incarnez ici un personnage appelé 3051, un jeune homme qui va avoir comme mission de traverser un niveau couloir ou une horde d’ennemis l’attendent.
Armé de votre pistolet, votre objectif est de vous frayer un chemin dans le niveau. En plus de sa capacité à tirer sur les ennemis, 3051 est doué d’une fonctionnalité appelée « retour sur vos pas », qui lui permet de retourner en arrière pour retrouver sa position et ses points de vie qui étaient les siens quelques secondes en arrière.
Le level design, est composé de quatre parties:
une première qui est la partie intro, ou vous allez pouvoir vous initier au gameplay. Cette partie est une session de tuto qui vous permet de mieux appréhender le tir au format TPS, mais aussi une partie plateformer sommaire permettant d’intégrer l’idée du « retour sur vos pas ».
une partie shooter qui va vous permettre de parcourir un niveau, tirer sur les ennemis.
une partie plateformer qui fera part belle à la réflexion qui implique une maitrise totale de la mécanique de « retour sur vos pas ».
et enfin une dernière partie ou vous allez devoir survivre à plusieurs vagues d’ennemis, puis au boss du jeu.
Le tout se termine par une cinématique de fin.
La direction artistique est pensée pour s’approcher d’une bande dessinée franco-belge, et un filtre cellshading a été appliqué sur les personnages et l’environnement.
La technique
Plusieurs questions se sont posée pour la création du projet. La première est bien évidemment l’outil de création du jeu. La question est simple: aujourd’hui, les deux outils les plus utilisés sur le marché sont Unreal Engine de la société Epic Games, et Unity.
Unreal Engine est aujourd’hui bien plus qu’un moteur de jeux vidéo. D’abord, il s’agit d’un éditeur de jeux, permettant de créer son jeu très rapidement et passer de l’idée au prototype en un rien de temps. Il est doté d’une fonctionnalité appelée Blueprint, permettant de faire de la programmation en nodale sur le moteur.
Unreal est pour moi un problème, car je voulais pouvoir créer un jeu en construisant la totalité du jeu. Hors, Unreal est le type d’outils qui est tellement surchargé qu’il permet de créer un jeu graphiquement aussi abouti qu’un triple A sans aucune connaissance préalable. Doté d’un générateur de personnage, de générateur procéduraux de niveaux, d’outils clé en main de création graphique, il ne correspond pas à mes besoins.
Car avant toute chose, BACKRUN est un projet personnel. Il est voué a me permettre de découvrir de nouvelles opportunités sur l’outil que j’utilise, à approfondir mes connaissance et à inventer de nouvelles manière de construire.
Unreal Engine, tout comme Construct, ne m’interessent pas dans le cadre de ce projet puisque je souhaite avant toute chose continuer à apprendre quelques subtilités.
Unity est un moteur de jeu beaucoup plus rigide: sans sur-couche de simplification avancée, et doté d’un système de compilation multisupport: quelques clics suffisent à porter le jeu sur une autre plateforme.
J’ai donc créé le projet sous Unity, avec l’idée de produire l’ensemble de mes assets et mes codes dédiés au gameplay.
Le mot de la fin
Ceci est l’un des nombreux prototypes que j’ai réalisé au fil des années pour mon projet BACKRUN: une histoire de science fiction que je développe depuis 2014 (j’avais 16 ans).
BACKRUN n’est peut-être pas encore impressionnant ou abouti. Mais c’est moi qui l’ai fait.
Le dernier prototype du jeu intitulée « BACKRUN: CHAPTER ZERO » était disponible en version work in progress sur Itchio.
Hapshot est une application de microblogging développée avec NodeJS pour serveur et MySQL pour la base de données.
La problématique est la suivante : Comment créer une application de réseautage social, et surtout comment la mettre en production ?
Concept
On peut partager sur Hapshot des textes courts accompagnés (ou pas) de photos. Le logiciel est construit en suivant le pattern MVC. Côté design, le logiciel est inspiré de Twitter et Tumblr.
Un utilisateur inscrit au service peut publier un article sur son compte. Ce dernier peut être accompagné ou non d’une image. L’utilisateur peut également accéder à son fil de messages personnalisé pour voir le journal des publications des personnes suivies dans l’ordre anti-chronologique.
Une page profil contient les derniers posts d’un utilisateur ainsi que sa photo, sa biographique, son pseudonyme et son nom en haut de page. Les pages profils sont accessibles depuis le web à l’adresse suivante : www.hap.sh/ot/nom_d_utilisateur .
Choix techniques
L’application Hapshot se veut être une plateforme sociale. Pour cela, elle doit répondre aux codes des réseaux sociaux actuels. Le choix de NodeJS est pour moi un avantage dans la réalisation de ce projet : il permet un chargement de page rapide : il est notamment utilisé chez de nombreux médias en ligne pour sa rapidité d’exécution et ses performances SEO. NodeJS supporte également les fortes montées en charge : il peut donc gérer un grand nombre de requêtes simultanément. Il est un environnement de développement stable, sécurisé et javascript est un langage que j’aime particulièrement.
Le logiciel sera architecturé à l’aide du standard MVC pour plusieurs raisons :
• La segmentation du code sous forme Modèle/Vue/Contrôleur permet plus de clarté • Il permet de rendre le code évolutif
La gestion des packages sera performée par npmJS.
Pour le back-end, Express sera utilisé comme serveur. Tandis que la base de données MySQL sera connectée à notre application à l’aide du module officiel NodeJS. Des modules tels que bodyParser, cookieParserJS, JSWebToken ainsi que HBS seront utilisés pour les vues.
Objectifs du projet
Apprendre et comprendre le fonctionnement d’une application sociale • Maitriser NodeJS et le système de développement avec packages (npm) • Approfondir mes connaissances sur MySQL • Créer une interface utilisateur conviviale et une expérience à forte valeur ajoutée
Enfin ce projet sera pour moi l’occasion de travailler sur une application douée de sens : à la fois expérimentale et sociale.
Le développement du projet
La charte Graphique et technique
La première étape du développement du projet a été la création d’une charte graphique. Car c’est à partir de cette ligne directrice que j’ai eu l’opportunité de filtrer un public qui s’apprête à utiliser l’application.
L’idée est partie d’un constat simple : à quoi ressemblerait Twitter s’il était pensé pour une audience jeune, par exemple celle de Snapchat ou Tumblr ?
Mon objectif est donc de cibler une tranche de la population jeune, volatile et qui partage plus vite que son ombre chaque moment marquant.
Pour m’accorder au mieux à ce jeune public, il m’a été tout à fait naturel de m’inspirer des chartes graphiques les plus populaires des magasins d’applications. A partir de cela, je me suis appliqué à la création d’une marque claire, efficace : Hapshot. Hap pour « Happy », « Happening » concaténé au mot « shot » pour l’esprit jeune, pour l’idée d’addiction.
L’application sera représentée par un smiley armé de dents de vampire, le tout sur un fond bleu uni.
Le site web sera accessible à partir de l’url www.hapshot.com, mais j’ai finalement décidé de raccourcir cette url à www.hap.sh afin que le site soit accessible plus rapidement.
Lors de mes recherches graphiques, j’ai effectué quelques itérations pour la création du logo. Celui-ci représente bien ma vision du projet.
L’interface utilisateur : la page d’accueil
La première page du site internet est pensée pour être minimaliste, et proposer à l’utilisateur la vision du produit.
Sur la capture d’écran ci-dessus, vous pouvez constater que l’interface fait part belle à l’image d’un concert, qui doit selon moi montrer le potentiel de l’application : partager le moment. A droite se trouvent les premières ébauches de ce que sera l’interface utilisateur : le logo de l’application, suivie du slogan « Tweet less, do more » (Tweetez moins, faites plus). A partir des boutons en dessous, l’utilisateur va pouvoir se connecter à son compte, ou en créer un nouveau.
Inscription au service
Une fois son compte créé, l’utilisateur pourra se connecter à son compte, mais son interface ne sera pas encore accessible car son compte n’aura pas encore été activé. Un mail de confirmation sera alors envoyé à l’adresse fournie par l’utilisateur afin d’activer son compte, et lui permettre d’accéder aux services. Les services et fonctionnalités.
La page d’accueil après connexion au service
Une fois connecté à son compte, l’utilisateur va pouvoir entrer dans le vif du sujet avec le fil d’actualité. Y seront disposés dans l’ordre anti-chronologique les différents posts des « hapshooters » suivis par l’utilisateur. L’utilisateur pourra interagir de deux manières avec un post : lui laisser une mention « j’aime » ou bien accéder au profil de son émetteur.
Pour accéder au profil, il y a plusieurs possibilités : la première est de cliquer sur le nom de l’utilisateur à consulter. La deuxième est la consultation par l’utilisateur de son propre profil à l’adresse www.hap.sh/ot/. Dans le cas où le profil consulté n’est pas celui de l’utilisateur, un bouton « Suivre/Follow » va apparaître à côté du nom d’utilisateur.
Technologies
Après avoir imaginé l’architecture du logiciel en avril 2021, je me suis appliqué au développement du projet. L’idée est la suivante : rendre le projet le plus modulaire possible afin de pouvoir développer une API et peut-être plus tard greffer une application mobile au projet. Le développement est toujours en cours à l’heure où j’écris ces lignes. Néanmoins, plusieurs obstacles se sont dressés sur ma route durant le développement du projet.
Comment passer une variable HBS à un fichier Javascript du client ?
L’un des problèmes sur lequel je suis tombé est le transfert de variables depuis handlerbar.js vers un fichier javascript client. Je pensais au début passer par une méthode native à javascript, mais je n’ai jamais trouvé de solution propre à ce problème. C’est pourquoi j’ai trouvé une alternative en me servant d’une balise cachée permettant de servir de fichier temporaire entre les deux partis.
Comment est géré l’affichage des posts ?
La première idée qui m’est venue à l’esprit, pour l’affichage des posts dans le fil d’actualité ou dans une page profil, était de passer les données au format JSON directement au travers du rendu par le serveur express. Mais pour rendre le processus plus modulaire et permettre plus tard de greffer au projet une application mobile, mon choix s’est porté sur la création d’une API permettant la récupération des post depuis une url donnée. Par exemple, pour récupérer les posts, le client va faire un appel get à l’API via l’url www.hap.sh/api/posts afin de récupérer au format JSON les différentes données des posts à afficher.
HBS, le moteur de vues
Handlebar.js est un moteur de vues pour serveur express. J’avais le choix entre ce dernier et un autre moteur de templates : Pug. J’ai néanmoins choisi HBS car je me sentais vraiment à l’aise avec ce moteur dans mes projets personnels, et étant adepte des balises de styles au sein du HTML, il m’a semblé nécessaire d’utiliser un outil permettant la manipulation de code HTML directement dans la vue.
MySQL, ma base de données
’ai longtemps hésité entre MySQL et Moongoose pour la gestion de la base de données. Mon choix s’est finalement porté sur MySQL car le fournisseur que j’utilise pour l’hébergement NodejS, à savoir OVH, propose une base de données MySQL et l’outil de gestion PHPMYADMIN.
Nodemon
Afin de gagner du temps lors de mes différentes itérations, j’ai utilisé un outil NodeJS nommé Nodemon. Ce framework permet un gain de temps considérable dans le développement du serveur. A chaque modification de fichier, le serveur redémarre automatiquement, et ainsi, je peux m’abstenir de relancer le serveur Node manuellement. J’ai gagné en efficacité et en efficience grâce à cet outil, et j’ai donc pu me concentrer sur le produit plutôt que sur le côté administration.
Nodemailer : le mailer simple d’utilisation
Afin d’automatiser l’envoie de mail de confirmation/validation de compte, j’ai utilisé une dépendance au Mailer Nodemailer. Ce dernier possède une approche assez simple, et il suffit d’entrer l’identifiant, le mot de passe ainsi que le serveur SMTP du webmail que l’on veut utiliser pour permettre l’envoie de mails automatiques. Par la suite, il suffisait de générer un entier unique pour valider le compte. Dans mon code, j’utilise les routes « verify » et « send » pour respectivement vérifier si le lien est correct, et pour envoyer le mail auprès du courrier électronique fourni par l’utilisateur venant de s’inscrire.
