Mes Projets
Durant mes études, mes stages et dans ma vie personnelle, j'ai réalisé plusieurs projets. Voici une liste de quelques réalisations.
La tête dans la toile
Stage de deuxième année
La tête dans la toile : Création d'un site de covoiturage
J'ai effectué mon stage de deuxième année (5 semaines) dans l'entreprise de développement "La tête dans la toile". Accompagné d'un second stagiaire et sous le regard d'Alan Ferronnière notre maitre de stage, nous avons travaillé sur le site des laboratoires vivants, un théâtre Nantais.
Le site permet de présenter les spectacles et les évènements du théâtre, ainsi que de réserver des places. Nous avions comme mission de créer un système de covoiturage, pour que les spectateurs puissent se rendre aux spectacles en groupe.
WordPress:
Création des covoiturages
Le site utilise WordPress. Nous avons donc utilisé ACF et CPT UI pour créer des trajets de covoiturage. Avec les nombreuses possibilités qu'offre wordpress, le php, le css et le javascript, nous avons pu créer un système de covoiturage simple et efficace, qui correspond à la demande du théâtre.
Liste des trajets
WordPress:
Création des comptes utilisateurs
Nous avons utilisé les plugins Ultimate Member et Loco Translate pour créer des comptes utilisateurs. Une fois connectés les spectateurs peuvent retrouver les trajets disponibles, ainsi que les covoiturages auxquels ils vont ou ils ont participé.
Création du système de message
Les utilisateurs peuvent discuter entre eux pour participer aux covoiturages. A l'instar du boncoin, ils parlent sur le site et reçoivent des emails pour les prévenir des messages.
Les bénéfices
J’ai beaucoup appris pendant ce stage avec Alan Ferronnière et je le remercie pour cela. J’ai principalement découvert Wordpress et Azure Devops. Mais j'ai également grandement perfectionné mes compétences en php, css et javascript. J'ai aussi appris à travailler en équipe et à m'organiser pour rendre un projet dans les temps. Pour en savoir plus je vous laisse consulter mon rapport de stage.
Dragonium
Stage de première année
Dragonium
Dragonium est un jeu de rôle et de stratégie médiéval fantastique, gratuit qui se joue sur navigateur, géré par l'association Zyzomis, et accesible à tous y compris aux non-voyants.
Durant un stage de 7 semaines j'ai eu l'occasion de travailler sur le site. Mes missions étaient de corriger des bugs et d'ajouter des petites ou grosses fonctionnalités.
Création d'un système de médailles
Les médailles sont des récompenses que les joueurs peuvent gagner en réalisant des actions spécifiques. J'ai créé un système de médailles qui permet de les afficher sur le profil des joueurs. Créer ce système nous a fait modifier la base de données, créer des crons, modifier la page de profil et les paramètres des comptes.
Carte de Dragonium
Inteface joueur
Création d'un système de multicompte
Beaucoup de joueurs ont plusieurs comptes. Pour les aider à les gérer, nous avons eu comme mission de créer un système de multicompte. Les joueurs peuvent lier leurs comptes et passer de l'un à l'autre en un clic. J'ai donc appris à gérer des mots de passe ainsi que la connexion et déconnexion des comptes.
Les bénéfices
Durant mon stage chez Zyzomis j’ai eu la chance de voir mes programmes mis en ligne et utilisés par les joueurs. Les missions étaient parfois plus qu’importantes pour le site, comme la résolution de certains bugs, mais d’autres étaient plutôt esthétiques. J'ai posé ma pierre sur cette édifice et j'ai appris beaucoup de choses. Pour en savoir plus je vous laisse consulter mon rapport de stage.
Projet TardyGrade
Création d'un réseau social pour le BTS
Le projet "Tardy-Grade"
Le but du projet était de développer en binome, un réseau social de partage de raisons de retard entre les utilisateurs, et de le déployer sur les serveurs de l'école.
Nous avons aussi développé une application avec WPF et une Web API, qui a pour but de donner les statistiques de l'application pour une période donnée (nombre d'utilisateurs, nombre de posts, etc).
Cahier des charges
Création du réseau social
Après avoir schématisé notre base de données, nous avons développé le site avec symfony. Les utilisateurs peuvent s'abonner à des établissements ou à d'autres utilisateurs. Ils peuvent se créer un compte, le modifier, s'identifier, etc... Ils peuvent faire des posts, qui peuvent être likés, commentés, et super likés (1 super like par semaine par utilisateur).
Page d'accueil
Screen du profil d'un utilisateur
Voir les abonnements d'un compte
Page administrateur
Création d'une application pour donner les statistiques du réseau
Nous avons développé une API avec symfony qui permet de donner les statistiques avec plusieurs méthodes (nombre de comptes, de posts, etc...) pour une période donnée. Nous avons aussi créé une API en C# avec .NET et un développement en couches, qui récupère et stocke les statistiques dans une BDD. Ensuite, nous avons aussi développé une application WPF qui appelle l'API C# et permet de visualiser les graphiques de toutes ces stats entre deux dates.
Acceuil de l'application WPF
Fenêtre d'affichage d'une statistiques
API Symfony
API C#
Schéma du fonctionnement
Quand nous créons une nouvelle période, nous passons par plusieurs couches pour arriver à la couche BLL. Nous vérifions dans l'historique si la période existe, si elle existe nous la renvoyons, sinon nous allons chercher dans l'API symfony les données, les enregistrons et les renvoyons.
La finalité
J'ai déployé une version finale de production sur les serveurs de l'école, avec des vm proxmox mises à notre disposition. J'ai beaucoup appris sur symfony et sur la création d'API. Je me suis aussi perfectionné dans l'organisation et le travail en équipe. Pour en savoir plus je vous laisse consulter le rapport du projet avec la notice.
Notice Contrôle de conformitéCréation Jeu Mobile
Un projet qui ravit les petits cousins
Pourquoi ? Quoi ? Comment ?
Nous avons eu un cours qui nous a montré les bases de blender et d'unity. Pour l'évaluation nous devions réaliser un petit jeu mobile, comme un jeu où un personnage court pour récupérer des pièces.
Comme je n'avais jamais fait de jeu et que l'exercice me semblait intéressant, j'ai voulu faire un un peu plus compliqué. Mon idée était que l'utilisateur arrivait dans la map où il devrait trouver une arme. Ensuite, on le confronterait à des ennemis de plus en plus puissants.
Création du personnage
et de ses fonctionnalités sur mobile
Nous avions vu en cours l'utilisation de l'asset "Starter Assets - ThirdPerson" qui permet d'avoir un personnage qui se déplace et que l'on contrôle de manière taclile ou par clavier. Mais moi je voulais créer un personnage capable d'attaquer, de ramasser des objets et de mourir. Les créateurs de l'asset qu'on utilisait proposaient cette version mais en payante. J'ai donc préféré suivre plusieurs tutos et créer moi même un personnage. Je remercie d'ailleurs la chaine youtube "TUTO UNITY FR" qui m'a beaucoup appris.
Interface du jeu
Création des armes
Les armes sont des objets que le joueur peut ramasser et utiliser pour attaquer les ennemis. Elles sont disposées à plusieurs endroits de la map. J'ai créé plusieurs armes, chacune ayant des caractéristiques différentes. J'ai aussi créé un système de dégâts qui permet de calculer les dégâts infligés par les armes.
Le map
Le joueur arrive dans un bâtiment abandoné. Il y a dedans des armes qui trainent, et différents ennemis. Au début, il y a seulement des loups. En tuant le plus gros, une clef est dropée. Elle déverouille une porte qui donne accès à de nouvelles pièces, où il faudra tuer le boss des ours, qui donne le clef du sous sol où il y a la morgue. Là le joueur devra tuer les zombies, ce qui lui affichera l'écran de victoire.
Map d'un asile abandonné
Les ennemis, création de leur IA
Les ennemis sont des personnages non-joueurs qui attaquent le joueur. J'ai récupéré leurs modèles 3D sur l'unity asset store et j'ai aussi créé un petit système qui leur permet de se déplacer et d'attaquer le joueur, chacun ayant des caractéristiques différentes.
Les Loups
Les loups sont les ennemis les plus faibles du jeu, mais une grande meute s'est installée dans le hall
Les Ours
Deux couples d'ours ont pris possession des grands espaces du batiment. Il faut tuer le plus vieux pour avoir la clef du sous sol
Les Zombies
Les cadavres de la morgue se sont réveillés, il faut les tuer pour finir le jeu
Télécharger le jeu
Si vous disposez d'un appareil Android et que tester ce petit jeu vous tente, je vous laisse le télécharger ici
Tetris et IA
Je code une IA qui joue à tetris
Tetris et IA
On parle de plus en plus d'intelligence artificielle, je me suis donc testé à en créer une sur mon temps libre. J'ai décidé de commencer par une IA simple en Python capable de jouer à Tetris.
Sur les réseau sociaux, en cours ou dans les médias on parle beaucoup des avancements de l'IA. C'est après avoir regarder les vidéos de Code BH que j'ai eu envie de me lancer. Parce que pour moi, on comprend mieux un sujet en le pratiquant. J'ai donc suivi sa méthodologie et créé mon propre code.
Interface du jeu
Développement du jeu
Avant de créer l'IA je devais créer le jeu. J'ai utilisé la bibliothèque Pygame pour gérer l'affichage et les interactions. Son fonctionnement général est simple : des blocs de différentes formes et couleurs tombent depuis le haut de l'écran, et le joueur doit les placer de manière à former des lignes complètes pour gagner des points.
Création de l'IA
Passons maintenant à la deuxième partie du projet. La création de l'IA.
Récupération des données
Pour que l'IA puisse jouer, elle doit connaitre la grille et le bloc en cours. Pour ce faire j'ai simplement modifié le code du jeu pour qu'il écrive les données dans un fichier json. J'y note le bloc en cours, le bloc suivant, la grille du tetris, le score, etc... Ensuite le programme va récupérer ces données pour les traiter.
{
"current_block": {
"shape": [
[
[ 0, 1, 0 ],
[ 1, 1, 1 ]
],
[
[ 1, 0 ],
[ 1, 1 ],
[ 1, 0 ]
],
[
[ 1, 1, 1 ],
[ 0, 1, 0 ]
],
[
[ 0, 1 ],
[ 1, 1 ],
[ 0, 1 ]
]
],
"color": [ 255, 0, 0 ],
"rotation": 0,
"positionX": 4,
"positionY": 3
},
"next_block": {
"shape": [
[
[ 1 ],
[ 1 ],
[ 1 ],
[ 1 ]
],
[ [ 1, 1, 1, 1 ] ],
[
[ 1 ],
[ 1 ],
[ 1 ],
[ 1 ]
],
[ [ 1, 1, 1, 1 ] ]
],
"color": [ 0, 128, 0 ],
"rotation": 0,
"positionX": 4,
"positionY": -2
},
"grid": [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, [ 255, 255, 0 ]],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, [ 255, 255, 0 ]],
[ 0, 0, 0, 0, 0, [ 128, 0, 128 ], [ 128, 0, 128 ], 0, 0, [ 255, 255, 0 ]],
[ 0, [ 0, 0, 255 ], 0, 0, [ 0, 255, 255 ], [ 128, 0, 128 ], [ 128, 0, 128 ], [ 128, 0, 128 ], [ 128, 0, 128 ], [ 255, 255, 0 ]]],
"score": 80,
"level_speed": 0,
"liste_vitesses": [ 1, 0.8, 0.7, 0.6, 0.5 ],
"nb_block": 9,
"activeIa": false
}
Exemple du JSON
{
"current_block": {
"shape": [
[
[ 0, 1, 0 ],
[ 1, 1, 1 ]
],
[
[ 1, 0 ],
[ 1, 1 ],
[ 1, 0 ]
],
[
[ 1, 1, 1 ],
[ 0, 1, 0 ]
],
[
[ 0, 1 ],
[ 1, 1 ],
[ 0, 1 ]
]
],
"color": [ 255, 0, 0 ],
"rotation": 0,
"positionX": 4,
"positionY": 3
},
"next_block": {
"shape": [
[
[ 1 ],
[ 1 ],
[ 1 ],
[ 1 ]
],
[ [ 1, 1, 1, 1 ] ],
[
[ 1 ],
[ 1 ],
[ 1 ],
[ 1 ]
],
[ [ 1, 1, 1, 1 ] ]
],
"color": [ 0, 128, 0 ],
"rotation": 0,
"positionX": 4,
"positionY": -2
},
"grid": [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, [ 255, 255, 0 ]],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, [ 255, 255, 0 ]],
[ 0, 0, 0, 0, 0, [ 128, 0, 128 ], [ 128, 0, 128 ], 0, 0, [ 255, 255, 0 ]],
[ 0, [ 0, 0, 255 ], 0, 0, [ 0, 255, 255 ], [ 128, 0, 128 ], [ 128, 0, 128 ], [ 128, 0, 128 ], [ 128, 0, 128 ], [ 255, 255, 0 ]]],
"score": 80,
"level_speed": 0,
"liste_vitesses": [ 1, 0.8, 0.7, 0.6, 0.5 ],
"nb_block": 9,
"activeIa": false
}
Exemple du JSON
Trouver où placer le bloc
Pour savoir où placer le bloc, j'ai mis en place un système de score pour chaque position. La position avec le plus petit score est choisie. Voilà en résumé les grandes étapes du tri des différents emplacements où peut être placé le bloc en cours :
Pour chaque rotation possible du bloc, le programme le place dans la grille et regarde si c'est un emplacement valide, s'il est bien posé au sol ou sur un bloc. Si oui, il calcule le score de cette position, en se basant sur 4 critères. Le premier est un simple malus de 80 points pour chaque trou que la position crée. Ensuite, l'IA calcule pour chaque colonne la différence de hauteur et ajoute ce nombre au score. Après, pour que le jeu soit le plus plat et équilibré, le programme regarde la différence de hauteur entre les colonnes côte à côte et met un malus égal à la différence X 5 points. Le dernier critère est un bonus qui retire des points au score si une ligne est supprimée.
L'IA fait cela en regardant le bloc en cours et le bloc suivant. Et elle choisit ainsi la meilleure position avec un coup d'avance.
Le résultat
Une fois que nous savons enfin où aller, nous pourrions croire qu'il suffit d'utiliser le package pyautogui pour écrire un script qui clique sur les touches. Mais pour cela, il faut connaître le chemin. Je ne rentre pas dans les détails pour ne pas surcharger la page d'informations, mais après avoir passé beaucoup de temps sur cela et testé plusieurs façons de faire, je vous laisse admirer le résultat.
Axes d'amélioration
J'ai développé cette IA et ce jeu sur quelques jours, c'était un petit projet qui m'a beaucoup plu et j'adore regarder les pièces se placer toutes seules. Mais je suis honnête avec moi-même, il y a plusieurs choses que je pourrais améliorer dedans :
Optimisation de la recherche de position finale de la pièce
Optimisation de la recherche de chemin
Modification de la façon de se déplacer
Optimisation des malus et bonus de score pour avoir un équilibrage parfait
Workshop 2024
Création d'un plan interactif du campus
Workshop 2024
Pour notre rentrée nous avons eu un Workshop tout au long de la première semaine. L'objectif était de concevoir et développer une solution permettant d'améliorer la vie au sein du campus.
Avec un autre développeur et un étudiant en marketing, nous avons décidé de créer un plan interactif du campus. Pour un établissement connecté, sécurisé et moderne grâce à une signalétique interactive innovante.
Plan interactif
Le plan permet aux utilisateurs (étudiants, enseignants, visiteurs, personnel administratif) d’accéder, en temps réel et de manière intuitive, à toutes les informations importantes sur le campus via une interface numérique (application, site web, ou bornes interactives).
Voici une segmentation de la cible :
Le personnelle pédagogique
Pourquoi
Les signalisations actuelles manquent de clarté, ce qui entraîne un grand nombre de questions ...
Les signalisations actuelles manquent de clarté, ce qui entraîne un grand nombre de questions adressées au personnel administratif. La gestion des flux humains pourrait être plus efficace.
Buts et bénéfices
Optimiser l'organisation du campus pour améliorer l'accessibilité et la gestion des flux de personnes...
Optimiser l'organisation du campus pour améliorer l'accessibilité et la gestion des flux de personnes. Cela permettrait de réduire les demandes d'informations répétitives, augmentant ainsi la productivité du personnel d'accueil et donnant une image moderne de l'établissement.
Les étudiants
Pourquoi
Les étudiants rencontrent des difficultés à localiser les salles libres ou les équipements nécessaires ...
Les étudiants rencontrent des difficultés à localiser les salles libres ou les équipements nécessaires, ce qui provoque frustration et retards, notamment en raison d'une organisation ou d'une signalisation insuffisante.
Buts et bénéfices
Accéder facilement aux ressources, comme les salles de classe, les imprimantes ou les ...
Accéder facilement aux ressources, comme les salles de classe, les imprimantes ou les zones pédagogiques, afin de ne pas perdre de temps à les chercher. Cela améliorerait l'expérience utilisateur, réduirait les retards et renforcerait l'accessibilité.
Les visiteurs
Pourquoi
Les informations disponibles pour les visites ponctuelles sont souvent insuffisantes, ce qui cause ...
Les informations disponibles pour les visites ponctuelles sont souvent insuffisantes, ce qui cause de l'inquiétude, notamment concernant la sécurité en cas d'urgence ou lorsqu'ils ne trouvent pas facilement leur chemin.
Buts et bénéfices
Faciliter l'accès aux informations lors des visites sur le campus, comme les réunions, les ...
Faciliter l'accès aux informations lors des visites sur le campus, comme les réunions, les portes ouvertes, ou les événements. Cela contribuerait à rassurer les visiteurs quant à la sécurité de leurs enfants et simplifierait leurs déplacements.
Le développement
Nous avons utilisé le framework Symfony pour renforcer nos compétences, même si le projet n'exigeait pas cette technologie. L'organisation s'est appuyée sur Azure DevOps et Git, avec des tâches segmentées en branches pour un développement collaboratif efficace, facilitant la correction de bugs et l'ajout de nouvelles fonctionnalités.
La page d'accueil
Adresse et horaires d’ouverture et de fermeture du campus de toute la semaine ainsi que la situation en temps réel (ouvert/fermé)
Liste de toutes les écoles du bâtiment, qui nous mène aux pages de chacune
Petite vue du plan, qui nous amène à la page du plan interactif
Plan Google Maps avec la localisation du campus pour faciliter l’accès des personnes non familières avec le lieu
Page école
Quoi ?
Chaque page école affiche le logo, le nom et une description de l'école, leur lien, ainsi qu'une liste de bureaux et de membres du personnel cliquables. En cliquant sur un bureau ou une personne, vous êtes redirigé vers l'étage correspondant sur le plan interactif, avec la salle mise en évidence.
Pourquoi ?
Cette page facilite l'accès aux informations sur les écoles du campus, et aide à localiser les bureaux et le personnel.
Comment ?
Ces pages sont générées automatiquement à partir des données en BDD. Cette dernière est aussi utilisée pour la fonction de recherche. On peut effectivement rechercher une personne ou une salle pour trouver leur emplacement sur le plan.
La pièce maitresse
Le plan
Le plan couvre quatre étages, du rez-de-chaussée au 3ème.
Sur chaque niveau, il est possible de cliquer sur les salles pour voir les occupants.
Les pictogrammes indiquent les imprimantes, les salles avec vidéoprojecteurs, les responsables santé et sécurité au travail (RSST) et les référents handicap.
En cliquant sur les icônes des imprimantes, on accède à leur notice d'utilisation.
Le résultat
Maintenant que vous avez vu le projet, je vous invite à regarder une rapide démonstration des fonctionnalités.
Axes d'amélioration
Pour seulement 4 jours (3 de développement), le projet a été une réussite, et nous avons reçu des retours positifs. Nous avons pu mettre en pratique nos compétences en développement web, en gestion de projet et en collaboration. Et voilà les axes d'amélioration :
Optimisation de la page plan pour des chargements plus rapides
Refonte du style
Ajout de plus d’informations sur le plan
Ajout d’un système de réservation pour voir si une salle est occupée et jusqu’à quand
Optimisation de la base de données
Afficher un calendrier des événements ou conférences se déroulant sur le campus, avec les salles dédiées