status:maj 19 nov 2024

Le dashboard Greenspector présente les résultats pour une meilleure compréhension. Il calcule en particulier l’Ecoscore Greenspector, une note gobale du service mesuré.

Il est également capable de comparer 2 versions d’une même application, si le parcours utilisateur a le même nombre de d'étapes ainsi que les mêmes noms d'étapes.

Configuration

L'exécutable dashboardCampagne a besoin de config.yml, definition.yml et des ressources pour générer le dashboard de résultats. Les ressources incluent example, i18n, images, site et site_templates. Vérifiez tous ces éléments.

Téléchargez depuis le Gitlab Greenspector et placez les dans le dossier où se trouve le dashboardCampagne et modifiez les avec les instructions suivantes :

Fichier de Config

cfgs:
  - name: "core-saas"                           # Nom de l'instance
    url: "https://core-saas-prod.greenspector.com"   # URL de l'instance
    token: [MYTOKEN]                      # Token de l'utilisateur

Remplacez [MYTOKEN] avec la valeur appropriée.

Fichier de Définition

Définition du dashboard

Premièrement, nous allons définir les paramètres globaux du dashboard à générer : nom, langue, type d’audit ou unités de mesure.

##################################################################################
# Dashboard definition
##################################################################################

name: Mesures Application               # Nom du rapport
env: core-saas                                # Nom d'environnement à utiliser (Relatif au fichier de config)
evolutiontype: comparaison              # "comparaison" ou "evolution" - Change le type de version des graphiques
generationtype: Dashboard               # Optionnel - Défaut: "All" - "All", "Dashboard" ou "Scenarios". Définit quels fichiers seront générés
basenetworktype: WIFI                   # Optionnel - Défaut: "WIFI" - "WIFI", "4G", "3G" ou "2G". Le réseau utilisé durant les mesures
usembfordata: false                     # Optionnel - Remplace Ko par Mo
shouldgenerateevolutionperdomain: false # Optionnel - Défaut: false - Evolution d'affichage par domaine
language: EN                            # Optionnel - Langue du rapport : "FR" (défaut) ou "EN"
version: 2.0                            # Optionnel - Défaut: 2.0 - "1.0" ou "2.0" ou "2.1"
web: true                               # Optionnel - Défaut: false. Pour les mesures web, renseigner true pour changer les seuils de consommations de données

Mesures

La seconde partie fait le lien entre la génération du dashboard avec les mesures stockées dans l'Atelier de mesures:

##################################################################################
# Campagne de mesure utilisée pour calculer l'Ecoscore
##################################################################################

auditids:
  - version: v1.0.0         # Nom de version à afficher
    plateforme: Galaxy S9   # Nom de la plateforme affichée dans App Greenspector
    os: Android             # "Android" ou "iOS"
    idwifi: [MYIDWIFI]      # ID de l'audit en WIFI
    id4g:                   # Optionnel - ID de l'audit en 4G pour comparer les mesures réseau (ou id3g pour des mesures en 3G)
    extramestime: 1.0       # float64 - Temps en secondes ajoutées à la fin des étapes de chargement. Ce temps n'est pas pris en compte pour la métrique de performance
    date: 07/12/2024        # Date de mesure à afficher

Remplacez [MYIDWIFI] grâce à a procédure suivante.

Pour identifier MYIDWIFI, allez sur l'Atelier de mesures. Sélectionnez la bonne version dans la liste et copiez le second nombre dans l’URL. C’est l’identifiant de l'audit.

Impact environnemental

En plus de regrouper et présenter les résultats, le dashboard propose une projection de l’impact environnemental. Dans cette partie, précisez les paramètres pour obtenir une projection précise grâce à notre modèle d’impact Greenspector.

##################################################################################
# Paramètres d'impact environnemental (optionnel)
##################################################################################

environmentalinput:
  useroptions:
    userlocations:
      france: 20            # % utilisateurs en France
      world: 80             # % utilisateurs dans une autre partie du monde (hors France)
    usertypes:
      smartphone: 50        # % utilisateurs sur smartphone
      tablet: 30            # % utilisateurs sur tablette
      pc: 20                # % utilisateurs sur PC
  networkoptions:
    networklocations:
      france: 20            # % utilisateurs en France
      world: 80             # % utilisateurs dans une autre partie du monde (hors France)
    networktypes:
      gsm2g3g: 4            # % utilisateurs en 2G/3G
      gsm4g5g: 15           # % utilisateurs en 4G/5G
      wiredfibre: 39        # % utilisateurs en fibre
      wiredxdsl: 42         # % utilisateurs en adsl/xdsl
  serveroptions:
    serverlocations:
      france: 20            # % server en France
      world: 80             # % server dans une autre partie du monde (hors France)
    servertypes:
      complexserver: 70     # % server complexe
      simpleserver: 30      # % server simple

La somme de chacune des répartitions doit être égale à 100.

Le paramètre du type de serveur (servertypes) sert à estimer l’impact serveur.

Serveur simple permet de modéliser des infrastuctures avec maximum 2 VM ou conteneurs (Par exemple un front et un backend), sans compter des services tiers.
- Par exemple : Une VM pour le front et une VM pour le backend.
Serveur complexe permet de modéliser le reste.

On met donc 100% à serveur complexe si l'infrastructure compte plus de 2 VM / conteneurs.

Comparaisons étape par étape

Cette partie est seulement utilisée pour comparer deux versions d’une même application.

##################################################################################
# Comparaisons étape par étape avec une autre campagne de mesure (optionnel)
##################################################################################

comparisons:
  metrics:                  # Métriques utilisées pour la comparaison
    - Performance
    - Data
    - EnergySpeed
    - EnergyConsumption
    - Carbon
  audits:
    - name: S9              # Nom de la série à afficher
      id: 12345             # Id de l'audit
      device: Galaxy S9     # Nom de l'appareil
      network: WIFI         # Optionnel - "WIFI"(défaut), "4G", "3G" ou "2G"
      extramestime: 1.0     # Temps ajouté à la fin des étapes de chargement. Ce temps n'est pas pris en compte pour la mesure de performance.
    - name: 3G
      id: 67891
      device: Galaxy S9
      network: 3G
      extramestime: 1.0
    - [...]

Le groupe metrics liste les métriques sur lesquelles les versions d’une même application vont être comparées. Mettez en commentaire les métriques dont la comparaison n’est pas nécessaire d'être affichée dans le dashboard.

Le groupe audits comprend l’ensemble des versions qui vont être comparées.

Définition des étapes

Cette dernière partie obligatoire définit quelles étapes vont être analysées.

##################################################################################
# Définition des étapes
##################################################################################

refname: "PAUSE_reference"
steps:
  - name: "PAUSE_reference"
    domain: Tech
  - name: "CHRGT_accueil"
    domain: Accueil
  - name: "PAUSE_accueil"
    domain: Accueil
  - name: "CHRGT_cookies"
    domain: Accueil  
    # type: action        # Optionnel - Type d'étape. Si non renseigné  
    # energy: true        # Optionnel - Etape à utiliser pour l'énergie. Si non renseignée, la valeur dépend du type d'étape
    # data: true          # Optionnel - Etape à utiliser pour les données. Si non renseignée, la valeur dépend du type d'étape
    # performance: true   # Optionnel - Etape à utiliser pour la performance. Si non renseignée, la valeur dépend du type d'étape
    # order: 1            # Optionnel - Ordre utilisé pour le rapport scénario
    # displayname:        # Optionnel - Nom à afficher dans le rapport au lieu du nom de la mesure
    # critical: false     # Optionnel - Défaut: false. Peut définir l'étape comme critique du parcours fonctionnel

Pour chaque étape, détaillez quelle métrique doit être prise en compte ou si cette étape est critique. Pour un dashboard clair, un nom plus lisible d'étape peut être utilisé.

Comme vu dans 06 - Découvrir le langage de test GDSL , les étapes sont divisées en 4 catégories : CHRGT, PAUSE, ACTION, SCROLL, respectivement pour un chargement, une pause, une action et un scroll.

Les étapes de PAUSE ne sont pas prises en compte dans la performance parce qu’elles ont une durée fixe.

Générer un dashboard

Pour générer un premier dashboard, exécutez la commande suivante :

Windows - Linux - MacOS:

dashboardcampagne -config=config.yml -definition=definition.yml -screenshots=screenshots

Le navigateur web va ouvrir et afficher le dashboard en format .html.

De plus, un fichier .pdf se génère seulement sur Linux.

Même si le dashboardcampagne n’est pas en échec, assurez vous de vérifier les logs. Des erreurs non fatales peuvent se produire.

En plus du dashboard de résultats, un deuxième fichier avec les captures avant et après chaque étape est également généré en format HTML et PDF. Ajoutez l’argument -screenshots=screenshots à la commande dashboardCampaign pour avoir cette fonctionnalité.

Export PDF

Si wkhtmltopdf est installé alors un export PDF se fera automatiquement à partir du fichier HTML.

Si de plus ghostscript est installé alors le pdf sera automatiquement compressé.

Greenspector Studio - Documentation

Générer un dashboard de résultats