Embedded Files
Ce projet, réalisé en solo, est divisé en deux sprints : le premier sprint étant le "Analytics Dashboard" représentant des données de ventes et locations d'une plateforme de streaming, le deuxième sprint étant la représentation d'une carte à l'échelle de la France représentant le nombre total de candidatures pour la formation BUT MMI (Métiers du Multimédia et de l'Internet). Ces projets ont été réalisés à partir d'une librairie de graphiques imposée et en récupérant des données d'un API pour le 1er sprint et d'un fichier JSON pour le deuxième sprint. Ce projet me donne le but de développer les compétences Comprendre, Exprimer et Développer.
AmCharts 5 est une bibliothèque de graphiques moderne, rapide et élégante, conçue pour offrir une expérience fluide dès l'installation. Elle contient par exemple des graphiques à barres, des diagrammes circulaires, des nuages de points mais également des heatmaps et même des cartes.
Elle s'intègre nativement avec TypeScript, Angular, React, Vue et JavaScript. Ayant utilisé JavaScript dans mon projet, je me suis donc inspiré de leurs démos afin de mieux représenter les données de la plateforme de streaming. Cela m'a permis d'efficacement répondre à leurs demandes.
Avec une licence simplifiée, elle élimine les complexités habituelles. En effet, elle est une bonne aide pour les développeurs quand il s'agit de créer des visualisations de données. De plus, il est facilement possible de modifier leurs couleurs ou formes.
Sprint 1 : Dashboard VOD (Vidéos à la Demande)
(lien vers le projet : https://github.com/williambrooks84/SAE303 )
Choix des graphiques (UI)
Pour réaliser le dashboard, j'ai consulté les démos disponibles dans la librairie et choisir un graphique par itération (12 au total mais ce n'est qu'à partir de l'itération 5 que j'ai eu besoin d'utiliser un graphique). Par exemple, pour représenter une évolution sur plusieurs mois un nuage de points semble être le plus pertinent, et pour une représentation d'un volume un diagramme circulaire est pertinent. Pour bien choisir quel diagramme utiliser pour quelle problématique j'ai utilisé des façons d'analyser que j'ai appris dans la ressource R3.09: Coréation et Design Intéractif. Cette phase du projet m'a permis de valider l'AC21.03 : Traiter des données avec des outils statistiques pour faciliter leur analyse et leur exploitation.
Base de données
Pour cette première partie de SAE, une base de données SQL m'est fournie. Elle contient des données tels que les noms des clients, leur adresse mail et leur pays. "playlists" En effet, les "playlists" se trouvent directement dans les tables des ventes et locations avec un ID client permettant de trouver qui est la personne ayant acheté ou louer le film en question. Pour trouver les titres il était nécessaire de faire des jointures pour récupérer des données venant de plusieurs tables différentes. Mes cours de SQL de l'année dernière m'ont beaucoup aidé à passer cette étape. J'ai utilisé des techniques que j'ai vu dans la ressource
API (développement back-end)
Mon API est organisé par trois dossiers représentant respectivement les classes, contrôleurs et répertoires (Class, Controller et Repository), tous codés en PHP et prenant à peu près tous la même forme :
Class : les modèles et structures de données, représentant les entités de l'application et définissant leurs propriétés et comportements.
Controller : le traitement des requêtes et réponses, reliant les utilisateurs à la logique métier.
Repository : l'accès et de la gestion des données, en assurant les interactions avec la base de données.
Fichier index.php : déclare tous les contrôleurs à utiliser sous un même "routeur"
Cette partie du projet reprend exactement la même structure que celle que j'ai vu dans la SAE 301, et également dans la ressource R3.13: Développement Back.
(Quelques extraits de mon code)
Customers.php
CustomersController.php
CustomersRepository.php
Client (développement front-end)
Dossier client
Le dossier client contient tous les fichiers permettant la configuration de Tailwind et Vite. Tailwind est une manière de faire la mise en page directement dans le index.html au lieu d'en faire un fichier CSS et Vite permet de tester la page en local en utilisant des données venant de l'API sans avoir besoin d'héberger le site (avec la commande "npm run dev"). Pour héberger le site j'ai fait un "npm run build" et j'ai mis les fichiers du dossier dist sur le serveur.
Dossier src
Le dossier src contient 1 dossier contenant 1 fichier data par table de données, un dossier lib contenant l'API request, un dossier ui contenant tous les composants du dashboard et un fichier main.js permettant de faire afficher tous les compsants de la page en faisant référence à des IDs présents dans le index.html général de la page.
Extraits de tous les fichiers JS
Fichier api-request.js permettant de récupérer des données de l'API
Un extrait d'un fichier data
Un exemple de fichier JS permettant d'afficher un diagramme circulaire ainsi que le résultat fianl :
Extraits du main.js permettant d'afficher le diagramme du volume des gains des locations par pays :
Le diagramme s'affiche sur cette partie de l'index.html
Résultat final du dashboard entier :
("null" s'affiche sur les deux montants du mois dernier vu qu'il n'y a pas eu de ventes en janvier 2025 sur les données)
Pour cette partie, j'ai utilisé des méthodes vues dans la ressource R312: Intégration et Développement Front pour la partie tailwind et JS, mais également la ressource R315: Représentation et traitement de l'information pour la partie p5.js (traitement des graphiques). J'ai pu valider les apprentissages critiques suivantes : AC23.06 : Élaborer et produire des animations, des designs sonores, des effets spéciaux, de la visualisation de données ou de la 3D, AC24.01 : Produire des pages et applications Web responsives et AC24.03 : Intégrer, produire ou développer des interactions riches ou des dispositifs interactifs.
Sprint 2 : Cartographie candidatures MMI (Métiers du Multimédia et de l'Internet)
(lien vers le projet : https://github.com/williambrooks84/SAE303-2 )
Leaflet est une librairie de cartographie gratuite et à libre accès permettant de représenter des données sur une carte d'une échelle déterminée. Dans mon cas, la carte s'affichera dans une premier temps à l'échelle de Limoges et dans un second temps l'échelle de la France entière. Le but de ce sprint est de traiter les candidatures reçues pour la formation MMI en France (en incluant la France d'outre-mer).
Vers la fin du projet, un graphique de type stacked bar de la librairie AmCharts 5 est également utilisé pour afficher le nombre de candidatures de chaque lycée ou post-bac par département. En faisant cette partie du projet, j'ai validé l'AC21.03 : Traiter des données avec des outils statistiques pour faciliter leur analyse et leur exploitation.
Données (JSON)
Ce sprint est entierement du développement front-end. Les données sont fournies sous forme de JSON et donc directement accessibles depuis la partie client. Pour cela, il n'y a pas de dossier api pour ce sprint.
Deux fichiers sont fournis : un fichier lycees.json représentant les données de chaque lycée de la France et un fichier candidatures.json représentant les données de chaque candidature en MMI.
Plus tard sur le projet, un fichier postal.js est utilisé pour mieux relier les lycées à leur ville et département.
Client (développement front-end)
Fichiers JS :
Dans le dossier client, la structure ne change généralement pas du premier sprint, il y a bien un dossier dist pour la compilation, un dossier src, un fichier index.html et des fichiers pour la configuration de Tailwind et Vite. Cependant. Le dossier src est également structuré de la même manière (dossiers data, lib et ui et fichier main.js). Ce qui change ici c'est que mon dossier data contient également les fichiers JSON et chaque fichier "data.js" possède des fonctions permettant de trier les données nécéssaires pour chaque problématique au lieu de tout simplement un lien vers l'API. Le dossier ui est bien réduit également, il ne contient que 4 composants: le header de la page, la carte, le graphique et un slider permettant de déterminer un seuil de candidatures.
Le fichier main.js est structuré en utilisant une structure MVC ("Model, View, Controller" ou "Modèle, Vue, Contrôleur"): M contient des variables contenant toutes les données des fichiers JSON, V contient toutes les fonctions permettant d'afficher des éléments sur la page HTML et C contient toutes les fonctions permettant de récupérer toutes les données nécéssaires pour chaque composant. En effet, je n'ai pas pensé à utiliser cette structure sur le premier sprint donc l'utiliser sur le deuxième sprint m'a permis de travailler plus efficacement et en ne surchargeant pas le fichier main.js vu que toutes les fonctions permettant de trier les donées se retrouvent désormais dans leurs fichiers data respectives. Cette partie du projet m'a permis de valider les AC suivants : AC24.01 : Produire des pages et applications Web responsives et AC24.03 : Intégrer, produire ou développer des interactions riches ou des dispositifs interactifs.
Fichier main.js
Un extrait d'un fichier data. Prenons l'exemple du fichier data-postaux.js. La variable "data" indique le fichier JSON où prendre les données. La fonction "compare" trie les données par ordre croissant selon le code postal. getByCodePostal permet de retourner le code postal négéssaire et getDepartments retourne la liste des départements.
Composant carte :
Ce fichier est le composant qui permet d'afficher la carte. Chaque lycée représentant des candidatures est représenté par un un marker bleu sur la carte. En cliquant dessus, il affiche le nombre de candidatures total ainsi que les candidatures par filière (générale, STI2D et autres). Les post-bacs s'affichent avec un marker rouge par département indiquant le numéro de département ainsi que le nombre total de candidatures post-bac.
Afin de ne pas surcharger le nombre de markers en regardant la carte à l'échelle de la France, un système de "clusters" est mis en place. Chaque cluster regroupe les markers les plus proches ainsi que leurs données en indiquant le nombre de lycées que cela représente sans besoin de cliquer. En cliquant dessus, le nombre de candidatures total et les candidatures par catégorie s'affichent.
En réalisant cette partie du projet, j'ai validé les compétences AC23.02 : Définir une iconographie (illustrations, photographies, vidéos) et AC23.06 : Élaborer et produire des animations, des designs sonores, des effets spéciaux, de la visualisation de données ou de la 3D.
Marker candidatures
Marker post-bacs
Cluster
Résultat final (carte + graphique):
Bilan :
Cette SAE m'a permis d'approfondir mes connaissances en traitement de données ainsi qu'en programmation p5.js. J'ai pu appiquer des stratégies vues dans les ressources afin de rendre la réalisation plus rapide et efficace. Cependant, je regrette de ne pas avoir mieux structuré mes fichiers lors du premier sprint mais je l'ai fait sur le deuxième pour mieux me repérer dans les changements à réaliser afin de ne pas passer trop de temps en ajoutant des novelles fonctionnalités. J'ai validé toutes les compétences demandées et j'ai beaucoup apprécié la réalisation de ce projet.
Page updated
Google Sites
Report abuse