🠔 Retour

TP 04 : Introduction à SonarQube et Eco Code

Durée : 3h
•
Difficulté : ⭐⭐⭐
•
Thème : Analyse de code

Objectif −

Installer et configurer SonarQube avec les plugins Eco Code pour analyser un projet de base, puis interpréter les résultats afin d’identifier les points d’amélioration en termes de performance et d’éco-conception.

Temps imparti : 3 heures

Date et lieu de dépôt : À déterminer

Informations +

SonarQube

SonarQube est une plateforme open-source utilisée pour l’inspection continue de la qualité du code. Elle permet de détecter des bugs, des vulnérabilités et des mauvaises pratiques en analysant automatiquement les projets.

Eco Code

Eco Code est un ensemble de règles pour SonarQube visant à réduire l’empreinte écologique du développement logiciel. Il fournit des recommandations spécifiques pour optimiser l’utilisation des ressources et limiter la consommation d’énergie.

Prérequis nécessaires +

  • Connaissances de base en HTML, CSS et JavaScript
  • Docker et Docker Compose installés sur votre machine
  • Accès à une machine avec Ubuntu, Windows ou macOS

Mise en place de l’environnement de travail +

  1. Étape 1 : Installation de SonarQube avec Docker Compose

    Créez un dossier tp-sonarqube : 

    mkdir tp-sonarqube

    Déplacez-vous dans votre dossier tp-sonarqube et créez un fichier docker-compose.yml : 

    cd tp-sonarqube
                                touch docker-compose.yml

    Éditez et enregistrez votre fichier docker-compose.yml : 

    version: "3"
                                services:
                                sonarqube:
                                    image: sonarqube:latest
                                    container_name: sonarqube
                                    ports:
                                    - "9000:9000"
                                    volumes:
                                    - sonarqube_conf:/opt/sonarqube/conf
                                    - sonarqube_data:/opt/sonarqube/data
                                    - sonarqube_logs:/opt/sonarqube/logs
                                    - sonarqube_extensions:/opt/sonarqube/extensions

                                volumes:
                                sonarqube_conf:
                                sonarqube_data:
                                sonarqube_logs:
                                sonarqube_extensions:

    Lancez SonarQube avec Docker Compose :

    docker-compose up -d

    Accédez à SonarQube à l’adresse suivante : http://localhost:9000

    Connectez-vous avec les identifiants par défaut (admin/admin) et modifiez le mot de passe lors de la première connexion.

  2. Étape 2 : Installation du plugin Eco Code

    Téléchargez le plugin EcoCode JavaScript.

    Copiez le fichier du plugin dans le répertoire des extensions de SonarQube : 

    docker cp ecocode-javascript-plugin-1.4.0.jar sonarqube:/opt/sonarqube/extensions/plugins

    Redémarrez SonarQube pour appliquer les changements :

    docker-compose restart sonarqube

  3. Étape 3 : Configuration du profil qualité sur SonarQube

    1. Accédez à l’interface SonarQube à http://localhost:9000.
    2. Allez dans Administration > Quality Profiles.
    3. Cliquez sur Create pour créer un nouveau profil de qualité.
    4. Ajoutez des règles du plugin Eco Code à ce profil en les recherchant puis en les activant.
    5. Assurez-vous d’associer ce profil à votre projet.

  4. Étape 4 : Installation de SonarScanner

    Ubuntu :

    sudo apt-get update
                                sudo apt-get install sonar-scanner

    macOS : installez avec Homebrew :

    brew install sonar-scanner

    Windows :

    1. Téléchargez SonarScanner .
    2. Décompressez le fichier téléchargé.
    3. Ajoutez le chemin de SonarScanner au PATH de votre système.

Étude de cas : site vitrine du bureau des étudiants de l’ESIROI +

Pour cette étude de cas, vous allez analyser un projet réel représentant le site vitrine du bureau des étudiants de l’ESIROI. Ce site contient plusieurs pages simples en HTML, CSS et JavaScript.

Votre objectif est de l’analyser avec SonarQube et le plugin Eco Code pour identifier des pistes d’amélioration en termes de performance et d’éco-conception.

  1. Étape 1 : Clonage du dépôt GitHub

    Clonez le dépôt contenant le site vitrine :

    git clone https://github.com/courdier/ecoconception.git

    Déplacez-vous dans le répertoire du projet :

    cd pages/en-pratique/bde-esiroi

  2. Étape 2 : Création du token SonarQube

    1. Connectez-vous à SonarQube sur http://localhost:9000.
    2. Allez dans votre profil utilisateur.
    3. Ouvrez la section Security.
    4. Créez un nouveau token d’analyse.
    5. Copiez ce token et gardez-le temporairement : il sera utilisé par SonarScanner.

  3. Étape 2 : Configuration du projet dans SonarQube

    Créez un fichier sonar-project.properties dans le répertoire racine du projet avec le contenu suivant : 

    
                                sonar.projectKey=bde_esiroi
                                sonar.sources=.
                                sonar.host.url=http://localhost:9000
                                sonar.token=VOTRE_TOKEN

  4. Étape 3 : Analyse du projet avec SonarScanner

    Lancez l’analyse du projet avec SonarScanner :

    sonar-scanner

  5. Étape 4 : Interprétation des résultats

    Une fois l’analyse terminée, consultez les résultats sur l’interface SonarQube. Identifiez les points faibles en termes de performance et d’éco-conception.

    Recherchez les recommandations faites par Eco Code pour améliorer l’efficacité du code et réduire son empreinte écologique.