Football Fantasy-2

Mon premier site web.

Sommaire

1. Recap
2. Sprint 1
3. Sprint 2

Recap

Mon projet de fantasy football pour la ligue marocaine INWI Botola Pro1 a déjà accompli des étapes significatives. Jusqu'à présent, j'ai mis en place les fondations de la plateforme, en développant la structure HTML et CSS de base, en intégrant les données des joueurs et des équipes via un processus de webscraping, et en commençant à travailler sur des fonctionnalités backend telles que l'authentification des utilisateurs. J'ai également créé un design initial pour le site, y compris la modélisation du terrain et la page d'accueil. Alors que je me prépare à entamer la deuxième phase du projet, mon intention est de développer davantage la plateforme en ajoutant des fonctionnalités clés, en améliorant son esthétique et en rendant le site pleinement fonctionnel. Ce développement inclura l'implémentation d'un système de gestion d'équipes, d'un système de points basé sur les performances des joueurs, et d'une interface utilisateur améliorée pour une expérience plus immersive et compétitive pour les utilisateurs.

1er Sprint : Fonctionnalités de Base

Backlog

Implémentation

Intégration et Gestion des Données des Joueurs

Jusqu'à présent, j'ai pu avancer sur la fonctionnalité "Intégration et Gestion des Données des Joueurs". J'ai réussi à importer manuellement les données des joueurs dans la base de données MongoDB, comme une base de mon processus. Bien que l'automatisation complète ne soit pas encore mise en place, Cette étape initiale sert de fondement solide pour la suite du développement. Les prochaines étapes impliqueront la recherche et l'intégration d'une API appropriée pour garantir la mise à jour en temps réel des données des joueurs et de la ligue.

const mongoose = require('mongoose');
const fs = require('fs');
const PlayerModel = require('./models/player'); 
const mongoURI = "mongodb+srv://TinySpy:@cluster0.guwuhmj.mongodb.net/MFL"
mongoose.connect(mongoURI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
const importPlayers = async () => {
  try {
    const data = fs.readFileSync('Botolapro_players.json');
    const players = JSON.parse(data);

    for (const playerData of players) {
      const player = new PlayerModel(playerData);
      await player.save();
    }

    console.log('Tous les joueurs ont été importés avec succès.');
  } catch (error) {
    console.error("Erreur d'importation des joueurs :", error);
  } finally {
    mongoose.disconnect();
  }
};
importPlayers();

Création et Gestion d'Équipe

J'ai fait des avancées solides dans le développement du backend pour permettre aux utilisateurs de créer et gérer leurs équipes. Maintenant, les utilisateurs peuvent créer une session sur le site et choisir les joueurs pour leur équipe. Ces choix sont enregistrés dans la base de données en stockant les id des joueurs, ce qui signifie que chaque fois qu'ils reviennent sur le site, leur équipe est là, avec les modifications qu'ils ont apportées. J'ai également implémenté les opérations CRUD (Créer, Lire, Mettre à jour, Supprimer) pour une gestion simple des équipes. En somme, la fonctionnalité backend avance comme prévu, offrant une expérience utilisateur pratique et facile d'utilisation.

Système de Points pour Fantasy League

Le tableau suivant décrit le système de points utilisé dans la fantasy league :

Intégration et Gestion des Données de la Botola Pro

Pour l'intégration des données de la ligue, j'ai rencontré quelques difficultés car mon plan initial était de rechercher et d'intégrer une API appropriée pour les données en temps réel des joueurs et de la ligue. Cependant, la ligue marocaine n'est pas avancée dans ce domaine et l'accès à une API serait payant. Par conséquent, j'ai modifié ma méthode tout en conservant le même objectif. Je vais utiliser le web scraping pour extraire les données du site web, notamment les statistiques des joueurs et des équipes, ainsi que les scores et le classement de tous les matchs. J'ai utilisé le site officiel de la Botola Pro pour obtenir toutes les données dont j'avais besoin:

const axios = require('axios');
const cheerio = require('cheerio');

async function scrapeJournee(url) {
    try {
        const { data } = await axios.get(url);
        const $ = cheerio.load(data);
        const fixtures = [];

        $(".style-table-7.cs7-1 tr").each((index, element) => {
            if (index === 0) return; 

            const tds = $(element).find('td');
            const homeTeam = $(tds[0]).text().trim();
            const awayTeam = $(tds[3]).text().trim();
            const date = $(tds[4]).text().trim();
            const time = $(tds[5]).text().trim();

            fixtures.push({ homeTeam, awayTeam, date, time });
        });

        return fixtures;
    } catch (error) {
        console.error(`Error scraping fixtures: ${error}`);
        return [];
    }
}

const url = 'https://botolapro.gestfootball.com/fr/p4755/#1560926979862-d8bdd234-a3403';
scrapeJournee(url).then(fixtures => console.log(fixtures));

2eme Sprint: Développement Front

Backlog

Apperçu du Front