Update README.md
This commit is contained in:
parent
8d1b17d8fc
commit
7d7f548485
176
README.md
176
README.md
@ -1,53 +1,52 @@
|
|||||||
Football Stats API
|
<div style="font-family: sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: auto;">
|
||||||
Description
|
|
||||||
Football Stats API est une application desktop développée avec Electron permettant de gérer des données liées au football.
|
|
||||||
|
|
||||||
Elle permet d'administrer des joueurs, des équipes, des tournois et de suivre leurs statistiques respectives.
|
<h1 style="color: #2c3e50; border-bottom: 2px solid #2c3e50; padding-bottom: 10px;">⚽ Football Stats API</h1>
|
||||||
|
|
||||||
Les données sont stockées localement grâce au localStorage, ce qui permet de conserver les informations même après la fermeture de l’application.
|
<section>
|
||||||
|
<h2 style="color: #2980b9;">📝 Description</h2>
|
||||||
|
<p>
|
||||||
|
<strong>Football Stats API</strong> est une application desktop développée avec <strong>Electron</strong> permettant de gérer des données liées au football.
|
||||||
|
Elle permet d'administrer des joueurs, des équipes, des tournois et leurs statistiques.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Les données sont stockées localement via <code>localStorage</code>, garantissant la persistance même après fermeture de l’application.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
Technologies utilisées
|
<hr>
|
||||||
HTML / CSS
|
|
||||||
|
|
||||||
JavaScript
|
<section>
|
||||||
|
<h2 style="color: #2980b9;">🛠 Technologies utilisées</h2>
|
||||||
|
<ul>
|
||||||
|
<li>HTML / CSS</li>
|
||||||
|
<li>JavaScript</li>
|
||||||
|
<li>Electron (Desktop)</li>
|
||||||
|
<li>localStorage (Stockage local)</li>
|
||||||
|
<li>JSON (Format de données)</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
Electron (Framework pour application desktop)
|
<hr>
|
||||||
|
|
||||||
localStorage (Stockage local navigateur)
|
<section>
|
||||||
|
<h2 style="color: #2980b9;">🏗 Architecture</h2>
|
||||||
|
<h3>🖥️ Frontend (Juba)</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Affichage et gestion de l'interface utilisateur.</li>
|
||||||
|
<li>Formulaires de saisie pour les joueurs et matchs.</li>
|
||||||
|
</ul>
|
||||||
|
<h3>⚙️ Backend Local (Malik)</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Logique de calcul des statistiques.</li>
|
||||||
|
<li>Gestion du CRUD et synchronisation JSON.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
JSON (Format d'échange de données)
|
<hr>
|
||||||
|
|
||||||
Architecture du projet
|
<section>
|
||||||
Frontend
|
<h2 style="color: #2980b9;">👤 Structure d'un Joueur</h2>
|
||||||
L’interface utilisateur permet de :
|
<pre style="background: #f4f4f4; padding: 10px; border-radius: 5px;">
|
||||||
|
|
||||||
Afficher et filtrer les joueurs.
|
|
||||||
|
|
||||||
Gérer les compositions d'équipes.
|
|
||||||
|
|
||||||
Créer et configurer des tournois.
|
|
||||||
|
|
||||||
Modifier les statistiques en temps réel.
|
|
||||||
|
|
||||||
Logique (Backend local)
|
|
||||||
La logique est entièrement gérée en JavaScript :
|
|
||||||
|
|
||||||
Gestion du CRUD (Create, Read, Update, Delete) pour les entités.
|
|
||||||
|
|
||||||
Synchronisation des données avec le stockage.
|
|
||||||
|
|
||||||
Mise à jour dynamique de l’interface (Manipulation du DOM).
|
|
||||||
|
|
||||||
Gestion des joueurs
|
|
||||||
Fonctionnalités
|
|
||||||
Ajouter un joueur.
|
|
||||||
|
|
||||||
Supprimer un joueur.
|
|
||||||
|
|
||||||
Modifier les statistiques individuelles (buts, passes, fautes).
|
|
||||||
|
|
||||||
Structure d’un joueur
|
|
||||||
JSON
|
|
||||||
{
|
{
|
||||||
"id": 0,
|
"id": 0,
|
||||||
"name": "",
|
"name": "",
|
||||||
@ -55,89 +54,18 @@ JSON
|
|||||||
"assists": 0,
|
"assists": 0,
|
||||||
"fouls": 0
|
"fouls": 0
|
||||||
}
|
}
|
||||||
Gestion des équipes
|
</pre>
|
||||||
Fonctionnalités
|
</section>
|
||||||
Créer une équipe.
|
|
||||||
|
|
||||||
Ajouter des joueurs à une équipe.
|
<hr>
|
||||||
|
|
||||||
Retirer des joueurs d'une équipe.
|
<section>
|
||||||
|
<h2 style="color: #2980b9;">🚀 Lancement</h2>
|
||||||
|
<p><code>npm install</code> && <code>npm start</code></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
Supprimer une équipe.
|
<footer style="margin-top: 20px; font-size: 0.9em; color: #7f8c8d;">
|
||||||
|
<p><em>Note : Ce projet simule un backend via JavaScript et localStorage.</em></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
Structure d’une équipe
|
</div>
|
||||||
JSON
|
|
||||||
{
|
|
||||||
"id": 0,
|
|
||||||
"name": "",
|
|
||||||
"players": []
|
|
||||||
}
|
|
||||||
Gestion des tournois
|
|
||||||
Fonctionnalités
|
|
||||||
Créer un tournoi.
|
|
||||||
|
|
||||||
Ajouter des équipes participantes.
|
|
||||||
|
|
||||||
Générer et gérer des matchs.
|
|
||||||
|
|
||||||
Afficher les résultats et classements.
|
|
||||||
|
|
||||||
Structure d’un tournoi
|
|
||||||
JSON
|
|
||||||
{
|
|
||||||
"id": 0,
|
|
||||||
"name": "",
|
|
||||||
"teams": [],
|
|
||||||
"matches": []
|
|
||||||
}
|
|
||||||
Structure d’un match
|
|
||||||
JSON
|
|
||||||
{
|
|
||||||
"team1": 0,
|
|
||||||
"team2": 0,
|
|
||||||
"score1": 0,
|
|
||||||
"score2": 0
|
|
||||||
}
|
|
||||||
Stockage des données
|
|
||||||
Le cycle de vie des données repose sur le localStorage :
|
|
||||||
|
|
||||||
Sérialisation : Conversion des objets JS en chaîne JSON.
|
|
||||||
|
|
||||||
Sauvegarde : Stockage persistant dans le moteur de recherche intégré.
|
|
||||||
|
|
||||||
Récupération : Rechargement automatique des données au lancement de l'application.
|
|
||||||
|
|
||||||
Lancement du projet
|
|
||||||
Installation
|
|
||||||
npm install
|
|
||||||
|
|
||||||
Lancement
|
|
||||||
npm start
|
|
||||||
|
|
||||||
Fonctionnement global
|
|
||||||
L’utilisateur interagit avec l’interface.
|
|
||||||
|
|
||||||
Les fonctions JavaScript sont exécutées.
|
|
||||||
|
|
||||||
Les données sont mises à jour dans des tableaux d'objets.
|
|
||||||
|
|
||||||
Les données sont sauvegardées dans le localStorage.
|
|
||||||
|
|
||||||
L’interface est mise à jour automatiquement pour refléter les changements.
|
|
||||||
|
|
||||||
Répartition du projet
|
|
||||||
Frontend : Juba
|
|
||||||
|
|
||||||
Backend (Logique JavaScript) : Malik
|
|
||||||
|
|
||||||
Remarque
|
|
||||||
Le projet ne repose pas sur une API serveur distante. Il simule un backend via la logique JavaScript et le stockage local.
|
|
||||||
|
|
||||||
Améliorations possibles
|
|
||||||
Intégration d'une base de données réelle (MongoDB / Firebase).
|
|
||||||
|
|
||||||
Développement d'une API REST avec Node.js.
|
|
||||||
|
|
||||||
Système d'authentification utilisateur.
|
|
||||||
|
|
||||||
Statistiques avancées avec des graphiques dynamiques.
|
|
||||||
Loading…
x
Reference in New Issue
Block a user
