- F.O.C.U.S : Etat De L’Art
- F.O.C.U.S – Enquête terrain, données recueillies et Persona
- F.O.C.U.S : Solution technique
SOLUTION TECHNIQUE DU PROJET : F.O.C.U.S.
par LACOTTE Axel, GILLET Lucie, PETIT Gaëtan, Xiaoyu LIU et Gaspard CHEVALIER.
Sommaire
1. Présentation du projet
1.1. Le problème
1.2. Notre solution
2. Évolution du projet
3. Architecture Matérielle
3.1. Le montage électronique
3.2. Composants utilisés
3.3. Le boîtier
4. Architecture Logicielle – Vue d’ensemble
4.1. Les quatre parties logicielles
4.2. Le Frontend – Interface utilisateur
4.2.1. Technologies utilisées (Frontend)
4.2.2. Les trois pages principales
4.3. Le Backend – Serveur
4.3.1. Technologies utilisées (Backend)
4.3.2. Rôle du Backend
4.3.3. Synchronisation avec Taïga
4.3.4. Structure de la base de données
4.4. Le Bootloader et ses services
4.4.1. Qu’est-ce que le Bootloader ?
4.4.2. Séquence de démarrage
4.4.3. Services systemd
4.4.4. Communication via Socket Unix
5. Comment tout fonctionne ensemble
5.1. Parcours utilisateur (Etapes 1 à 6)
5.2. Rafraîchissement automatique
6. Justifications techniques
6.1. Pourquoi Next.js pour le Frontend ?
6.2. Pourquoi Flask pour le Backend ?
6.3. Pourquoi une architecture daemon pour les LEDs ?
6.4. Pourquoi importer depuis Taïga ?
7. Difficultés rencontrées et solutions
7.1. Accès GPIO et privilèges root
7.2. Synchronisation des données
7.3. Affichage multi-zones sur la matrice
8. Perspectives d’amélioration
8.1. Fonctionnalités visuelles
8.2. Aspect ludique et notifications
8.3. Nouveaux Layouts et Support
9. Liens et ressources
1. Présentation du projet
1.1. Le problème
Dans le monde du développement logiciel, les équipes utilisent souvent la méthode agile pour gérer leurs projets. Cette méthode divise le travail en petites tâches, regroupées en user stories, elles-mêmes organisées en sprints. Mais au quotidien, il est difficile de voir où en est le projet dans son ensemble.
Les outils de gestion comme Taiga, Jira ou Trello permettent de suivre les tâches individuellement, mais ils nécessitent d’ouvrir une application, de naviguer dans des menus, et de regarder des chiffres abstraits. La progression du projet reste invisible au jour le jour pour l’équipe menant souvent à une baisse de motivation générale.
1.2. Notre solution
Nous avons créé Focus, un panneau LED physique qui affiche en temps réel la progression d’un projet agile. Placé dans un espace de travail commun, il permet à toute l’équipe de voir instantanément où en est le projet, sans avoir besoin d’ouvrir un logiciel.
La matrice LED de 64×64 pixels affiche différentes vues :
- Vue globale du projet avec le pourcentage de complétion
- Vue par sprint pour suivre les sprints du projet global
- Vue par sprint pour avoir le détail de ses user stories
2. Évolution du projet
Au début, nous avions l’ambition de créer notre propre outil de gestion de projet complet en plus du panneau LED. Mais nous nous sommes rendu compte que ce n’était pas là où résidait notre valeur ajoutée. Des outils comme Taiga existent déjà et font très bien leur travail.
Nous avons donc recentré notre projet sur ce qui le rend unique : la visualisation physique de la progression. Focus importe les données depuis Taïga et se concentre sur l’affichage, pas sur la gestion. C’est un complément aux outils existants, pas un remplaçant.
3. Architecture Matérielle
3.1. Le montage électronique
Le système Focus repose sur quatre composants principaux reliés entre eux.
3.2. Composants utilisés
- Alimentation LRS50-5
-
- Lien : gotronic.fr – Alimentation LRS50-5
- Rôle : Convertit le courant secteur (230V) en 5V continu nécessaire pour alimenter la matrice LED. Elle est branchée directement sur une prise secteur.
- Matrice LED 64×64 RGB
-
- Lien : gotronic.fr – Matrice 64×64 à leds RGB
- Rôle : C’est l’écran du système. Elle contient 4096 LEDs (64×64) capables chacune d’afficher n’importe quelle couleur. Elle utilise le protocole HUB75E pour recevoir les données d’affichage.
- Contrôleur de matrice LED
-
- Lien : gotronic.fr – Contrôleur de matrice à leds
- Rôle : Fait le lien entre le Raspberry Pi et la matrice LED. Il traduit les signaux du Raspberry Pi en signaux HUB75E que la matrice peut comprendre.
- Raspberry Pi 4 8Go
-
- Rôle : C’est le cerveau du système. Ce petit ordinateur exécute notre logiciel, se connecte au réseau WiFi, et communique avec Taïga pour récupérer les données du projet.
3.3. Le boîtier
Pour des raisons de sécurité et d’esthétique, nous avons conçu un boîtier en bois découpé au laser. Ce boîtier :
- Cache l’alimentation et les composants internes (on ne voit que la matrice LED).
- Protège les utilisateurs des composants électroniques.
- Donne un aspect professionnel et épuré au produit final.
4. Architecture Logicielle – Vue d’ensemble
4.1. Les quatre parties logicielles
Le système Focus est composé de quatre parties logicielles qui travaillent ensemble :
- Le Frontend : L’interface web que l’utilisateur voit dans son navigateur. Il permet de se connecter à Taïga et de configurer l’affichage.
- Le Backend : Le serveur qui tourne sur le Raspberry Pi. Il stocke les données, communique avec Taïga, et contrôle les LEDs.
- Le Bootloader : Le système qui démarre automatiquement tous les services quand on allume le Raspberry Pi.
- Le LED Manager : Le service qui contrôle directement la matrice LED, gérant les animations et l’affichage.
Ces quatre parties communiquent entre elles :
- Le Frontend envoie des requêtes au Backend via HTTP.
- Le Backend envoie des commandes au LED Manager via un socket Unix.
- Le Bootloader démarre et supervise tous les autres services.
4.2. Le Frontend – Interface utilisateur
4.2.1. Technologies utilisées (Frontend)
Le Frontend est construit avec :
- Next.js : un framework moderne pour créer des sites web réactifs.
- React : une bibliothèque pour construire des interfaces utilisateur interactives.
- TypeScript : une version améliorée de JavaScript avec vérification des types.
Ces technologies permettent de créer une interface rapide et agréable à utiliser.
4.2.2. Les trois pages principales
- Page Taiga (page principale)
- C’est là où l’utilisateur se connecte à son compte Taïga et sélectionne le projet à suivre.
- Une fois connecté, il voit l’arborescence complète de son projet : les sprints, les user stories, et les tâches.
- Chaque élément affiche sa progression avec une barre et un pourcentage.
- Page Jauges
- Cette page montre les progressions sous forme de jauges visuelles.
- Elle permet de choisir quel type d’affichage montrer sur la matrice LED : Vue globale (un seul pourcentage), Vue sprint (plusieurs barres), ou Vue user story (détail plus fin).
- Page Settings
- Cette page permet de configurer le rafraîchissement automatique des données, de réinitialiser la base de données si nécessaire, et de voir l’état de connexion du système.
4.3. Le Backend – Serveur
4.3.1. Technologies utilisées (Backend)
Le Backend est construit avec :
- Flask : un framework Python léger pour créer des APIs.
- SQLite : une base de données simple stockée dans un fichier.
- Python : le langage de programmation, choisi pour sa compatibilité avec le Raspberry Pi.
4.3.2. Rôle du Backend
Le Backend est le chef d’orchestre du système. Il :
- Stocke les données du projet dans la base de données.
- Communique avec Taïga pour récupérer les informations via son API.
- Calcule les pourcentages de progression.
- Envoie les commandes à la matrice LED.
4.3.3. Synchronisation avec Taïga
Quand l’utilisateur demande une synchronisation, le Backend :
- Se connecte à l’API Taïga avec les identifiants fournis.
- Récupère la liste des sprints du projet.
- Pour chaque sprint, récupère les user stories.
- Pour chaque user story, récupère les tâches.
- Stocke tout dans la base de données locale.
- Calcule les pourcentages de progression.
- Met à jour l’affichage LED.
L’utilisateur peut aussi configurer un rafraîchissement automatique (toutes les 5 secondes, 2 minutes, ou 5 minutes).
4.3.4. Structure de la base de données
La base de données est organisée de façon hiérarchique :
Projet
└── Sprint 1
└── User Story 1
└── Tache 1 (terminee)
└── Tache 2 (en cours)
└── User Story 2
└── Tache 3 (en cours)
└── Sprint 2
└── …
Le pourcentage de progression est calculé en remontant cette hiérarchie :
- Une tâche terminée = 100%, une tâche en cours = 0%.
- Une user story = moyenne des tâches.
- Un sprint = moyenne des user stories.
- Le projet = moyenne des sprints.
4.4. Le Bootloader et ses services
4.4.1. Qu’est-ce que le Bootloader ?
Quand on branche le Raspberry Pi, il doit automatiquement démarrer tous les services nécessaires. C’est le rôle du Bootloader : orchestrer le démarrage du système.
4.4.2. Séquence de démarrage
Le Bootloader exécute une séquence de 11 étapes, chacune étant signalée par un symbole ou une animation sur la matrice LED :
- Récupération du code (téléchargement des dernières mises à jour depuis GitHub)
- Chargement de la configuration (lecture des paramètres)
- Initialisation des logs (démarrage du système de journalisation)
- Connexion au LED Manager
- Connexion WiFi
- Configuration du tunnel (mise en place de l’accès distant)
- Démarrage du serveur (lancement du Backend Flask)
- Démarrage du Frontend (lancement de l’interface web Next.js)
- Configuration Nginx (mise en place du proxy web)
- Démarrage du bot Discord (activation des notifications)
- Fin du démarrage
4.4.3. Services systemd
Linux utilise systemd pour gérer les services. Nous avons trois services principaux :
- LED Manager Service : Tourne en tant que root (nécessaire pour accéder aux GPIO), contrôle directement la matrice LED et écoute les commandes sur un socket Unix.
- Boot Manager Service : Tourne en tant qu’utilisateur normal, orchestre le démarrage de tous les composants et gère les erreurs et les redémarrages.
- Focus Server Service : Tourne en tant qu’utilisateur normal, exécute le Backend Flask et gère les requêtes de l’interface web.
4.4.4. Communication via Socket Unix
Pour que le Backend (utilisateur normal) puisse contrôler les LEDs (droits root), un socket Unix est utilisé comme canal de communication. Seul le LED Manager a les droits root, ce qui permet de séparer les privilèges et de sécuriser le système.
5. Comment tout fonctionne ensemble
5.1. Parcours utilisateur (Étapes 1 à 6)
Voici le parcours complet quand un utilisateur met à jour une tâche :
- Étape 1 – Connexion : L’utilisateur accède à l’interface web de Focus, entre ses identifiants Taïga et sélectionne son projet.
- Étape 2 – Sélection du projet : Le Frontend envoie une requête au Backend avec les informations du projet. Le Backend se connecte à Taïga.
- Étape 3 – Synchronisation : Le Backend télécharge les sprints, les user stories et les tâches, et les stocke dans la base de données SQLite.
- Étape 4 – Calcul de la progression : Le Backend calcule les pourcentages à chaque niveau de la hiérarchie.
- Étape 5 – Mise à jour de la LED : Le Backend envoie la nouvelle progression au LED Manager via le socket Unix. Le LED Manager la traduit en affichage visuel.
- Étape 6 – Affichage : La matrice LED affiche une barre de progression colorée en fonction du layout sélectionné.
5.2. Rafraîchissement automatique
L’utilisateur peut activer un rafraîchissement automatique (polling). Le Frontend interroge régulièrement le Backend qui re-synchronise avec Taïga. Ainsi, si une tâche est marquée comme terminée dans Taïga, la LED se met à jour automatiquement.
6. Justifications techniques
6.1. Pourquoi Next.js pour le Frontend ?
Next.js offre plusieurs avantages :
- Rendu côté serveur pour des pages qui se chargent rapidement.
- Routing automatique basé sur la structure des fichiers.
- Excellent support de TypeScript.
- Grande communauté et beaucoup de ressources.
6.2. Pourquoi Flask pour le Backend ?
Flask a été choisi car il est :
- Simple à mettre en place, à maintenir et à faire évoluer.
- Très léger.
- Supporté par de nombreuses ressources en ligne.
6.3. Pourquoi une architecture daemon pour les LEDs ?
Le contrôle des GPIO (les broches du Raspberry Pi) nécessite les droits root. Pour des raisons de sécurité, une architecture daemon a été mise en place :
- Un daemon LED Manager tourne avec les droits root (minimum de code).
- Le reste du système fonctionne sans droits root (plus sécurisé).
- La communication rapide et fiable se fait via un socket Unix, permettant aussi de gérer la concurrence entre les services.
6.4. Pourquoi importer depuis Taïga ?
Des outils de gestion de projet comme Taïga sont très aboutis et les recréer n’apporterait pas de valeur. Focus apporte une valeur ajoutée par sa visualisation physique, permettant aux équipes de garder leurs habitudes (Taïga) tout en bénéficiant du panneau LED.
7. Difficultés rencontrées et solutions
7.1. Accès GPIO et privilèges root
- Problème : Le contrôle de la matrice LED nécessite les droits root pour accéder aux GPIO du Raspberry Pi.
- Solution : Architecture daemon avec socket Unix. Le LED Manager tourne en root et les autres services envoient des commandes via ce socket sans avoir besoin des droits root.
7.2. Synchronisation des données
- Problème : Comment garder les données à jour sans bombarder le serveur Taïga de requêtes ?
- Solution : Système de polling configurable. L’utilisateur choisit la fréquence de rafraîchissement (5 secondes, 2 minutes, 5 minutes), avec 2 minutes par défaut comme bon compromis.
7.3. Affichage multi-zones sur la matrice
- Problème : Comment afficher plusieurs informations (sprints, user stories) sur une seule matrice de 64×64 pixels ?
- Solution : Système de layouts configurables :
- Single : une seule grande barre pour le projet.
- Sprint view : plusieurs barres horizontales pour les sprints.
- User story layout : une barre pour le sprint + deux pour les user stories.
8. Perspectives d’amélioration
Avec plus de temps, les ajouts suivants auraient été envisagés :
8.1. Fonctionnalités visuelles
- Jalons visuels : Afficher des marqueurs (lignes à 25%, 50%, 75%) sur la barre de progression pour visualiser les étapes clés.
- Nouveaux layouts : Ajouter un Burndown chart animé.
8.2. Aspect ludique et notifications
- Système de récompenses : Débloquer des badges ou des animations spéciales pour ajouter un aspect ludique et motivant.
- Animations de célébration à 100% : Afficher une animation festive (feux d’artifice, confettis) quand un projet ou un sprint est terminé.
- Notifications sonores : Ajouter un buzzer ou un petit haut-parleur pour émettre un son quand un seuil est atteint (ex: un son encourageant à 50%, feu d’artifice à 100%).
8.3. Nouveaux Layouts et Support
- Support d’autres outils : Étendre la compatibilité au-delà de Taïga pour inclure Jira, Trello et GitHub Projects.
9. Liens et ressources
Dépôt GitHub : https://github.com/stoptexting/couad-focus
Sur ce dépôt, vous trouverez :
- Le code source complet du projet.
- Les instructions d’installation.
- La documentation technique détaillée.
- Les fichiers de configuration pour le Raspberry Pi.
- Les plans de la boite pour la refaire soi-même.
