Projets

A propos

Contact

Parlons un peu de Easing !

esc

F10

F11

F12

—_

+ =

delete

tab

{[

}]

caps lock

return

shift

control

option

command

option

Entreprise

Mon stage s’est déroulé au sein du laboratoire FEMTO-ST, dans le département DISC, avec l'équipe AND, et sous la tutelle de la COMUE UBFC. Ce stage a été supervisé par Monsieur Joseph Azar, dont le soutien et les conseils m'ont été d'une grande aide.

Le projet

Pendant mon stage, j'ai eu l'opportunité de travailler sur le projet EASING, en collaboration avec l'équipe ELLIAD. Ce projet innovant a pour objectif de créer des maisons temporaires de type Airbnb, spécialement conçues pour les personnes à mobilité réduite.

Ma mission consistait à développer une maquette interactive (web) pour simuler ces maisons intelligentes.

Technologies utilisées

Essayez d'attraper une technologie et de la bouger.

Compétences sollicitées

Niveau 1 :

AC 1.1 Implémenter des conceptions simples :

Lors de ma mission de développement front-end, j'ai implémenté des conceptions en utilisant Vue.js, en créant des composants réutilisables pour éviter la redondance du code. Par exemple, j'ai conçu des composants pour afficher les paramètres sous forme de rectangles représentant les températures, l’heure et le type de personne. J'ai également créé des icônes spécifiques pour d’autres paramètres (voir tâche : Mise en place du front-end). Ces composants ont été intégrés de manière à garantir que le site soit responsive et fonctionnel sur différents appareils. Autre conceptions simples, j’ai été amené à implémenter une page de login (voir tâche : Mise en place d’une authentification sécurisée), un chatbot qu’on peut retrouver en bas à droite (voir tâche : Développement d’un chatbot), ou encore un backend similaire à ceux qu’on a pu faire au cours de l’année, avec une API à la fois REST mais aussi des sockets (voir tâche : Mise en place du backend).
AC 1.2 Élaborer des conceptions simples :

Pour élaborer des conceptions simples, j'ai commencé par créer des maquettes sur Figma. Cela m'a permis de visualiser et de planifier l'interface utilisateur avant de commencer le codage (voir tâche : Mise en place du front-end). Ensuite, j’ai travaillé sur la conception du store Pinia, ce qui m'a permis de gérer efficacement les états de l'application, notamment les tableaux de données et les fonctions nécessaires pour la carte interactive. En utilisant des frameworks comme Vue.js et Pinia, j'ai pu créer des structures claires et faciles à maintenir. Pour ce qui est du backend mais aussi de la base de donnée ces tâches se sont précédés par une grande phase d’élaboration sur papier, mais aussi de discussion avec M.Azar puisqu’on devait faire en sorte que l’application parte sur de bonnes bases et donc ne pas faire de choix qu’on aurait pu regretter, d'où l'utilisation des sockets pour le backend, mais aussi de MongoDb pour la base de données (voir tâches : Mise en place du backend et Mise en place de la base de données).
AC 1.3 Faire des essais et évaluer leurs résultats en regard des spécifications :

J'ai effectué des tests réguliers pour garantir que les fonctionnalités développées respectent les spécifications. Pour la partie fonctionnelle avec l'API, j'ai utilisé le few-shot learning pour améliorer les résultats de l’API GPT (voir tâche : Améliorer les résultats retournés par l’API GPT). Je testais et ajustais les résultats de l’API pour répondre aux exigences du rapport ELLIAD. J'ai également mis en place un système de socket, plus pertinent que l'API REST, pour une communication en temps réel entre la maison et le backend. J'utilisais fréquemment Postman avant d'implémenter les fonctionnalités du frontend pour vérifier le bon fonctionnement de l'API (voir tâche : Mise en place du backend). Pour le frontend, j'ai testé plusieurs frameworks pour assurer leur adéquation avec les besoins du projet. J'ai essayé Vuetify, mais l'ai retiré car il n'était pas pertinent. Pour la carte interactive, j'ai testé Leaflet puis choisi vue-konvas, offrant plus d'options pour le mouvement des figures (voir tâche : Conception et développement d’une carte interactive).
AC 1.4 Développer des interfaces utilisateurs :

J'ai développé des interfaces utilisateurs en utilisant Vue.js, en veillant à ce qu'elles soient intuitives et accessibles. J'ai mis en place des composants visuels pour afficher divers paramètres, ainsi qu'un menu à droite pour représenter les légendes de la carte (voir tâche : conception et développement d’une carte interactive). J'ai appliqué des principes de design responsive pour garantir une interface ergonomique et esthétique. Par exemple, j'ai implémenté une page de login simple (voir tâche : Mise en place d’une authentification sécurisée) et une page principale comprenant divers paramètres ,un footer, une navbar (voir tâche: Mise en place du front-end) et une carte interactive (voir tâche : Conception et développement d’une carte interactive)

Niveau 2 :

AC 2.1 Élaborer et implémenter les spécifications fonctionnelles et non fonctionnelles à partir des exigences :

J'ai élaboré et mis en œuvre les spécifications fonctionnelles et non fonctionnelles en m'appuyant sur les exigences fournies. Pour la réalisation de la carte interactive, j'ai utilisé le framework Vue-Konva pour reproduire les plans des pièces et les dispositifs présents dans le rapport ELLIAD (voir tâche : Conception et développement d’une carte interactive). En plus de cela, chaque action renvoyée par l’API et interprétée par le front-end.était déduite du rapport ainsi que des différentes réunions avec mon tuteur (voir tâche : Amélioration des résultats retournés par l’IA). Actuellement, je travaille sur la différenciation des actions en fonction des profils utilisateur, suite à une réunion avec l'équipe. De plus, la mise en place du système de login était une exigence directe de mon tuteur.
AC 2.2 Appliquer des principes d’accessibilité et d’ergonomie :

Lors de la conception des interfaces, j'ai accordé une attention particulière aux principes d'accessibilité et d'ergonomie pour garantir une utilisation fluide de l'application par un large public. J'ai développé des interfaces responsives et les ai optimisées en utilisant des icônes explicites et des contrôles intuitifs, et en limitant le nombre d'informations affichées à l'écran pour réduire la complexité (voir tâche : Mise en place du front-end et conception et développement d’une carte interactive). Cette approche a permis d'assurer une expérience utilisateur claire et accessible.
AC 2.3 Adopter de bonnes pratiques de conception et de programmation :

J'ai adopté des bonnes pratiques de conception et de programmation en commentant le code et en favorisant la modularité par la création de composants réutilisables. J'ai optimisé les algorithmes et simplifié les fonctions redondantes pour éviter la duplication (voir tâches : Mise en place du frontend et Amélioration des résultats retournés par l’IA). Côté backend, j'ai également respecté ces normes en intégrant la logique de services, de routers, et de controllers (voir tâche : Mise en place du backend). Cette approche a amélioré la lisibilité du code et a contribué à l'efficacité et à la maintenabilité de l'application.
AC 2.4 Vérifier et valider la qualité de l’application par les tests :

Bien que je n'aie pas réalisé de tests unitaires ou d'intégration formels, j'ai effectué des tests systématiques à chaque étape du développement. À chaque implémentation, je vérifiais les résultats sur la console que ce soit pour le frontend ou le backend. Pour les retours de l'API, j'utilisais POSTMAN pour m'assurer de la conformité des données renvoyées, que ce soit pour les sockets ou pour les requêtes REST (voir tâches : Mise en place du backend, amélioration des résultats retournés par l’IA et développement d’un chatbot). Bien que ces tests n'étaient pas exhaustifs, ils m'ont permis de valider la qualité de l'application au fur et à mesure de son développement.

Niveau 1 :

AC 1.1 Analyser un problème avec méthode (découpage en éléments algorithmiques simples, structure de données…) :

Pour aborder les problèmes de manière méthodique, chaque implémentation a été précédée d'une réflexion approfondie, menée seul ou avec mon tuteur, M. Azar. Pour chaque problème, j'ai analysé et décomposé les tâches afin de trouver des solutions efficaces, que ce soit pour le backend ou la carte interactive. Par exemple, pour interpréter les résultats de l'API GPT, j'ai opté pour l'utilisation de tableaux JSON, permettant à l'API de recevoir et de renvoyer des données structurées (voir tâche : Mise en place du backend et amélioration des résultats retournés par l’IA). Cette méthode a rendu les données plus compréhensibles et exploitables dans l'application. De même, pour la création de la carte interactive, j'ai choisi d'utiliser un tableau JSON NoSQL contenant des points, en raison de sa flexibilité et de sa facilité d'intégration, après une phase de recherche préliminaire (voir tâche : Mise en place de la base de données).
AC 1.2 Comparer des algorithmes pour des problèmes classiques (tris simples, recherche…) :

J'ai réalisé une comparaison approfondie entre différents algorithmes afin d'optimiser les fonctionnalités clés de la carte interactive, notamment pour le zoom et la détection des pièces. Après avoir examiné plusieurs options, j'ai sélectionné les algorithmes les plus efficaces pour garantir les meilleures performances de l'application. Pour le zoom, j'ai simplement ajouté un facteur d'échelle, tandis que pour la détection de pièce, j'ai opté pour une approche basée sur la vérification de l'appartenance du point de dépôt du bonhomme aux coordonnées des pièces, ce qui s'est avéré être une solution efficace (voir tâche : Conception et développement d’une carte interactive). Côté backend pour les fonctions de recherche dans le tableau je comptais faire les miennes mais j’ai préféré utiliser celles existantes déjà avec (find, map etc) qui sont beaucoup + optimisées que celles que j’allais utiliser, ces fonctions ont été utiles pour le filtre ainsi que les recherches (voir tâche : Améliorer les résultats retournés par l’IA).
AC 1.3 Formaliser et mettre en œuvre des outils mathématiques pour l’informatique :

J'ai appliqué des outils mathématiques pour résoudre divers problèmes dans l'application. Par exemple, j'ai utilisé des algorithmes de création de bordures à partir de points pour deux cas : empêcher le personnage de quitter la carte et limiter le zoom à une certaine zone, mais j’ai aussi utilisé un algorithme pour savoir à partir des points d’une pièce, et de la position du personnage dans quelle pièce il se situe. J'ai également géré la réduction de la taille de la carte en multipliant les coordonnées par un facteur, et utilisé des facteurs similaires pour positionner le personnage correctement (voir tâche: Conception et développement d’une carte intéractive.).

Niveau 2 :

AC 2.1 Choisir des structures de données complexes adaptées au problème :

Dans le cadre de mon travail, j'ai opté pour des structures de données complexes telles que les tableaux JSON pour stocker les informations sur les pièces et les dispositifs. Cette décision s'est avérée judicieuse car elle m'a permis de manipuler efficacement les données spécifiques à chaque pièce et dispositif (voir tâche : Mise en place de la base de données). Contrairement à une base de données relationnelle, l'utilisation de tableaux JSON était plus appropriée dans ce contexte, car chaque pièce possède des dispositifs différents, ce qui rendait la structure flexible et adaptable aux besoins variables de l'application. Côté frontend j’ai été confronté à la même chose avec le store pinia, mais j’ai étudié chaque cas et choisis la structure la plus appropriée (voir tâche : Mise en place du frontend).
AC 2.2 Utiliser des techniques algorithmiques adaptées pour des problèmes complexes (par ex. recherche opérationnelle, méthodes arborescentes, optimisation globale, intelligence artificielle…) :

J'ai dû utiliser des techniques algorithmiques avancées. Par exemple, j'ai utilisé, mais aussi optimiser un algorithme pour déterminer la position du personnage à partir des points d'une pièce, ainsi qu'un algorithme de calcul des bordures spécifiques pour le zoom et pour le positionnement du personnage sur la carte interactive. Ces algorithmes offrent à la fois une fonctionnalité précise et des performances optimisées (voir tâche : Conception et développement de la carte interactive). J'ai également optimisé les calculs pour garantir une exécution rapide et efficace de l'application, assurant ainsi une expérience utilisateur fluide et réactive. En plus de cela, pour le chatbot, j'ai dû effectuer un filtrage en fonction d'un prompt, tâche complexe en raison de l'imprévisibilité des prompts. J'ai donc utilisé l'API d'OpenAI pour filtrer les données en fonction du prompt et pour utiliser ces données par la suite (voir tâche : Mise en place d’un chatbot).
AC 2.3 Comprendre les enjeux et moyens de sécurisation des données et du code :

J'ai mis en place un système d'authentification sécurisé en utilisant des technologies telles que MySQLite et JWT (JSON Web Tokens). En plus de sécuriser les requêtes REST et Socket, j'ai implémenté des middlewares pour vérifier les tokens, assurant ainsi que seules les requêtes authentifiées étaient autorisées à accéder aux données et aux fonctionnalités de l'application (voir tâche :Mise en place d’une authentification sécurisée). Cette approche a renforcé la sécurité globale du système en protégeant les données sensibles et en prévenant les accès non autorisés.

Tâches accomplies

Cliquez sur une tâche pour pouvoir voir les détails de la tâche.

Mise en place du frontend

Conception et développement d’une carte interactive

Modélisation de la base de données

Mise en place du backend

Améliorer les résultats retournés par l'IA

Développement d’un chatbot

Mise en place d’un système d’authentification sécurisé

Dockerisation de l'application

Accéder au projet

Github

Docker

M'hammed Mechroubi

2024

Portfolio conçu par MECHROUBI M'hammed dans le cadre de la note de stage.

Contact

Envoyez un mail

Pages

Accueil

Expériences

Projet

Social

Twitter

Github

Ce site a été fait par M'hammed MECHROUBI en Next, avec l'utilisation de TypeScript.