Application de localisation en temps réel du Z dans un bâtiment.
Cliquez, signalez, traquez — en un clic, tous les utilisateurs connectés voient la position du Z sur la carte.
Z-Tracker est une application web collaborative permettant de signaler et visualiser en temps réel la position d'une cible (le « Z ») au sein d'un bâtiment. Grâce aux WebSockets, chaque signalement est instantanément diffusé à tous les utilisateurs connectés.
| Fonctionnalité | Description |
|---|---|
| Carte interactive | Cliquez directement sur le plan du bâtiment pour signaler une position |
| Temps réel | Diffusion instantanée via WebSocket à tous les clients connectés |
| Historique | Tableau latéral triable avec l'ensemble des signalements récents |
| Prédiction | Algorithme de suggestion de la prochaine salle probable |
| Suppression | Possibilité de supprimer ses propres signalements |
| Commentaires | Ajout de notes optionnelles sur chaque signalement |
| Distinction temporelle | Les signalements du matin s'estompent automatiquement l'après-midi |
| Landing page animée | Page d'accueil avec animation de pas (footprints) et effets visuels |
Backend Flask 3.0 · Flask-SocketIO · Flask-SQLAlchemy · Eventlet
Frontend Vanilla JS · Socket.IO Client · Canvas API · CSS3 Animations
Base de données SQLite (via SQLAlchemy)
Message Queue Redis (file de messages SocketIO)
Templating Jinja2
- Python 3.10+
- pip
- Redis (optionnel, pour le message queue en production)
# 1. Cloner le dépôt
git clone <url-du-depot>
cd ProjetZ
# 2. Créer et activer un environnement virtuel
python -m venv .venv
source .venv/bin/activate # Linux / macOS
# .venv\Scripts\activate # Windows
# 3. Installer les dépendances
pip install -r requirements.txt
# 4. Initialiser la base de données
python initialize_db.py
# 5. Lancer l'application
python run.pyL'application est accessible sur http://localhost:2000.
| Variable | Défaut | Description |
|---|---|---|
PORT |
2000 |
Port du serveur |
SECRET_KEY |
dev-key |
Clé secrète Flask (à changer en production) |
DATABASE_URL |
sqlite:///ztracker.db |
URI de la base de données |
SOCKETIO_MESSAGE_QUEUE |
redis:// |
Connexion Redis pour le message queue |
- Accédez à http://localhost:2000 — la landing page s'affiche avec une animation de pas
- Cliquez sur « Trouver Z » pour accéder à la carte
- Cliquez sur la carte à l'endroit où vous avez repéré le Z
- Remplissez le formulaire (pseudo, salle, groupe, commentaire optionnel)
- Validez — la position est instantanément visible par tous les utilisateurs connectés
- Consultez le tableau latéral pour voir l'historique complet des signalements
ProjetZ/
├── app/
│ ├── __init__.py # Factory Flask + initialisation extensions
│ ├── routes.py # Routes HTTP ( / et /map )
│ ├── api.py # Endpoints API REST
│ ├── models.py # Modèle Position (SQLAlchemy)
│ ├── sockets.py # Handlers WebSocket + cache + scheduler
│ ├── templates/
│ │ ├── index.html # Landing page (animation footprints)
│ │ └── map.html # Interface carte interactive
│ └── static/
│ ├── css/
│ │ ├── style.css # Styles de la carte
│ │ └── index.css # Styles de la landing page
│ ├── js/
│ │ └── map.js # Logique front : Socket.IO, canvas, prédiction
│ └── images/
│ ├── map.png # Plan du bâtiment
│ └── footprint.svg # Icône pas (animation)
├── config.py # Configuration centralisée
├── run.py # Point d'entrée de l'application
├── initialize_db.py # Script d'initialisation de la BDD
├── requirements.txt # Dépendances Python
└── instance/
└── ztracker.db # Base de données SQLite
L'application utilise Socket.IO sur le namespace /ws pour la communication bidirectionnelle.
Client → Serveur
──────────────────────────────────────────
report_position Signaler une nouvelle position
{ normalizedX, normalizedY, pseudo, salle, groupe, commentaire }
delete_position Supprimer un signalement
{ id, pseudo }
Serveur → Client (broadcast)
──────────────────────────────────────────
new_position Nouvelle position ajoutée (broadcast à tous)
position_deleted Position supprimée (broadcast à tous)
- Les 20 positions les plus récentes sont mises en cache côté serveur (TTL : 60s)
- Le cache est invalidé à chaque nouveau signalement ou suppression
- Le frontend affiche les 10 dernières positions par défaut (extensible)
- Les positions de plus de 24h sont automatiquement nettoyées
L'application couvre 25+ salles réparties sur plusieurs bâtiments :
| Bâtiment | Salles |
|---|---|
| A | A012, A014, A016, A108, A109, A110, A112, A114, A116 |
| D | D03 |
| J | J006, J101, J102, J103, J104, J105, J106, J201, J202, J203, J204 |
| L | L208, L210, L212 |
| Autres | Foyer, Crous |
Groupes : P01 à P28, Compaore
Pour un déploiement en production (VPS par exemple) :
# Définir les variables d'environnement
export SECRET_KEY="votre-cle-secrete-robuste"
export PORT=2000
# Lancer avec un service systemd ou screen/tmux
python run.pyNote : L'application écoute sur
0.0.0.0par défaut, elle est donc accessible depuis toutes les interfaces réseau. Pensez à configurer un reverse proxy (Nginx) et un pare-feu en production.
- Forkez le dépôt
- Créez votre branche (
git checkout -b feature/ma-fonctionnalite) - Committez vos changements (
git commit -m "feat: ajout de ma fonctionnalité") - Pushez sur la branche (
git push origin feature/ma-fonctionnalite) - Ouvrez une Pull Request
Projet PING · Fait avec Flask & Socket.IO