Outil de validation #

Démarrer l’outil #

Pour utiliser l’outil de validation, il faut l’intégrer à un projet Java. Pour l’exemple présenté en théorie, on débutera avec le code suivant :

public class MonTableau extends Tableau {

    public void deplacerDecaler() {
        // implanter la procédure ici
    }
}

public class Procedure extends ProcedureDecaler<MonTableau> {

    public static void main(String[] args) {
        NtroAppFx.launch(args);
    }

    protected Class<MonTableau> classeMonTableau() {
        return MonTableau.class;
    }
}

À l’exception de la méthode deplacerDecaler, qui doit être complétée, les étudiant·e·s n’ont pas à comprendre ce code, qui ne sert qu’à intégrer l’outil de validation à leur projet Java.

Exécuter le projet Java va démarrer l’outil :

À noter que bien que le manuel fait référence à un outil de validation (au singulier), il faut en réalité intégrer une version différente de l’outil de validation pour chaque procédure à valider. Chaque version définit aussi sa propre visualisation des données avec des cartes à jouer.

Utiliser l’outil #

Voici les affichages principaux de l’outil de validation.

• Le panneau principal (1) affiche des cartes à jouer.
• Le panneau des cas de tests (2) permet de :
  • Sélectionner un nouveau cas de test.
  • Visualiser les résultats de la validation.
• Le panneau de navigation (3) permet d’avancer et/ou reculer dans la séquence d’exécution.
• Le panneau des variables (4) visualise les diverses valeurs pour l’état courant de l’exécution.

Visualisation avec des cartes à jouer #

Des cartes à jouer animées permettent de visualiser l’exécution d’une procédure informatique.

L’exécution de la procédure se déroule en un certain nombre d’étapes. La transition d’une étape à l’autre est illustrée par une animation où p. ex. une carte peut changer de position.

Sélection de différents cas de test #

Au démarrage, l’outil charge plusieurs cas de tests. La première étape d’un cas de test contient des valeurs pour chaque variable importante de la procédure informatique. Les étapes subséquentes correspondent à l’exécution de la procédure.

Pour chaque cas de test, on peut soit sélectionner une solution ou la validation du code étudiant. Pour la solution, l’icône représente le nombre d’étapes contenu dans la solution. Pour le code étudiant, l’icône représente le résultat de validation.

Navigation entre les étapes de la procédure #

Pour le cas de test sélectionné, on peut naviguer à travers la séquence d’exécution de la procédure. Cette option est particulièrement utile pour détecter une erreur. On peut comparer, étape par étape, le déroulement de la solution au déroulement de procédure implantée par l’étudiant·e.

À noter que l’outil de validation exécute la procédure dès le démarrage. Les étapes d’exécution sont ainsi mémorisées à l’avance. Contrairement à un véritable débogueur, on peut donc reculer dans les étapes d’exécution.

Valeurs des variables #

Le panneau des variables montre comment les valeurs importantes pour la procédure évoluent en cours d’exécution. Voici un exemple pour quatre étapes.

Étape 1	Étape 2
Étape 3	Étape 4

Expérimenter avec les données #

L’outil supporte la modification en temps réel du fichier de données correspondant aux cartes affichées. Cette fonctionnalité permet de créer des exercices où les étudiant·e·s doivent encoder des données de façon à produire la bonne visualisation.

À noter que l’outil sauvegarde les données dans un fichier .json situé dans le répertoire _storage/models

Trouver des erreurs dans la procédure implantée #

Visualiser la procédure à l’aide d’une animation aide les étudiant·e·s à trouver certaines erreurs, surtout qu’on peut comparer l’animation produite pour la solution avec celle produite pour le code étudiant.

L’exemple ci-bas illustre une erreur courante dans le code étudiant. On voit que la procédure correcte s’arrête dès que le marqueur bleu (l’indice i dans la boucle) dépasse le marqueur rouge (l’indice aDeplacer identifiant la carte à déplacer). Dans le code étudiant, cette condition n’as pas été codée correctement et la procédure s’exécute pour des étapes en trop, ce qui mène à un résultat erroné.

Afficher le graphe d’objets #

Finalement, l’outil de validation génère un graphe d’objet pour les données courantes et sauvegarde ce graphe dans le répertoire _storage/graphs Ces graphes permettent aux étudiant·e·s de se forger une image mentale de l’organisation des données en mémoire. En particulier, puisque les graphes sont générés, les étudiant·e·s peuvent consulter les graphes d’objets correspondant à différentes étapes d’une procédure.

Données JSON	Graphe d'objets
{ "_C": "MonTableau", "aDeplacer": 3, "i": 0, "cartes": [ null, { "_C": "Carte", "numero": 5, "sorte": "TREFLE" }, { "_C": "Carte", "numero": 3, "sorte": "CARREAU" }, null, { "_C": "Carte", "numero": 7, "sorte": "PIQUE" }, { "_C": "Carte", "numero": 2, "sorte": "COEUR" } ], "memoireA": null, "memoireB": { "_C": "Carte", "numero": 2, "sorte": "TREFLE" } }