Contrôle continu pratique (CCP) d’entrainement

1. Informations générales

  • M2ALMA − Advanced Topics on Software Engineering (XMS3IE050)

  • Contrôle Continu Pratique (CCP)

  • Date : XX/XX/20XX

  • Durée : 2h

2. Consignes

Le travail doit être réalisé sur les machines de TP de la salle informatique, et non à l’aide de vos machines personnelles.

Il est interdit de communiquer entre vous (ou avec quelqu’un d’extérieur), que ce soit dans la salle, ou par moyen numérique (échange de fichiers, messagerie instantanée, etc.).

Il est autorisé de demander de l’aide à l’enseignant, notamment en cas de problème technique. L’enseignant par contre n’est jamais obligé de vous répondre, notamment s’il estime que c’est à vous de connaître la réponse.

Vous n’avez accès que à certaines ressources numériques, qui incluent notamment le site web du cours, l’espace Madoc du cours, et bien entendu le Gitlab de l’université. Vous avez aussi accès à certaines documentations des outils mentionnés dans le sujet.

Une tentative d’outrepasser ces restrictions − pour accéder à des ressources en ligne non autorisées, pour s’aider d’une IA, pour communiquer avec une personne extérieure, etc. − pourra être sanctionnée. Dans le doute, demandez à l’enseignant.

3. Rendre votre travail

Le barème est donné à titre indicatif et est susceptible de changer.

4. Exercice 1 - Gestion des dépendances (~7 points)

Certaines opérations que vous allez réaliser risquent de prendre un peu de temps. N’hésitez pas à avancer sur l’Exercice 2 pendant l’attente !

Pour réaliser ce premier exercice, vous aurez besoin du projet PMD disponible sur GitHub. Commencez par créer une copie de travail sur votre compte. Vous n’aurez pas besoin de l’historique des changements :

git clone https://github.com/pmd/pmd.git --depth 1

Utilisez les outils vus pendant les séances de TP pour répondre aux questions suivantes et saisissez vos réponses dans le formulaire disponible sur Madoc.

Une fois validé, vous ne pouvez plus modifier le formulaire (équivaut à "rendre sa copie" pour cet exercice).

Questions

  1. Ce projet déclare-t-il des dépendances qui ne sont pas utilisées ? Lesquelles ?

  2. Est-ce que ce projet dépend d’artefacts qui ne sont pas déclarés ? Lesquels ?

  3. Ce projet dépend-t-il de l’artefact org.junit.jupiter:junit-jupiter-params ? L’utilise-t-il effectivement ?

  4. Ce projet dépend-t-il de l’artefact com.google.protobuf:protobuf-java ? S’il s’agit d’une dépendance transitive, quel est le chemin de dépendance de PMD jusqu’à protobuf-java ?

5. Exercice 2 - Software Language Engineering (SLE) avec Langium (~13 points)

5.1. Énoncé du problème

On souhaite implémenter un petit Domain-Specific Language (DSL) nommé FormDSL permettant de facilement créer des formulaires pour des sondages en ligne. FormDSL doit permettre de créer des questions ouvertes ou fermées réparties dans un ensemble de sections.

Après discussion avec les futurs utilisateurs du DSL, on établit pour FormDSL le cahier des charges succint suivant :

  • On doit pouvoir définir des formulaires, chaque formulaire possédant un titre, et un ensemble de sections.

  • Une section possède un titre, et est composée d’une séquence de trois types possibles d’éléments :

    • une question ouverte, avec un intitulé et la taille de la boite de réponse (petite, moyenne ou grande),

    • une question fermée, avec un intitulé et un ensemble de réponses possibles,

    • un paragraphe de texte explicatif, qui ne joue aucun rôle dans le questionnaire à proprement parler.

  • une question (ouverte ou fermée) peut être marquée comme obligatoire.

À partir de ce cahier des charges, une syntaxe abstraite a déjà été spécifiée sous la forme du diagramme de classes (métamodèle) suivant :

Diagram

Voici un exemple de formulaire qu’on aimerait pouvoir programmer avec FormDSL :

  • Titre du formulaire : "Enquête sur les couleurs"

  • Une section "Informations générales" contenant :

    • Un paragraphe contenant "Pour mieux vous connaître"

    • Une question fermée obligatoire "Votre genre" avec trois possibilités : Masculin, Féminin, Autre

    • Une question ouverte obligatoire "Votre profession", de taille petite

  • Une section "Votre regard sur les couleurs" contenant :

    • Une question ouverte "Que vous évoquent les couleurs ?", de taille grande

    • Une question fermée "Quelle couleur préférez-vous ici ?" avec trois possibilités: Vert, Bleu, Pourpre

On souhaiterait une syntaxe concrète qui permettrait de coder cet exemple de formulaire de la manière suivante :

form "Enquête sur les couleurs" {

    section "Informations générales" {
        paragraph "Pour mieux vous connaître"
        mandatory closed_question "Votre genre" {
            option "Masculin"
            option "Féminin"
            option "Autre"
        }
        mandatory open_question "Votre profession" box=SMALL
    }

    section "Votre regard sur les couleurs" {
        open_question "Que vous évoquent les couleurs" box=LARGE
        closed_question "Quelle couleur préférez-vous ici ?" {
            option "Vert"
            option "Bleu"
            option "Pourpre"
        }
    }
}

Enfin, on souhaiterait pour ce DSL une sémantique sous la forme d’un générateur de code qui serait capable de produire automatiquement la page HTML suivante à partir de ce programme FormDSL.

formDSL model result
Figure 1. Exemple de HTML qui pourrait être généré à partir du programme FormDSL exemple:
Listing 1. Code HTML de la page montrée juste au dessus
<!DOCTYPE html>
<html>
<head>
    <title>Enquête sur les couleurs</title>
</head>
<body>
    <h1>Enquête sur les couleurs</h1>

    <h2>Informations générales</h2>

    <p>Pour mieux vous connaître</p>

    <h3> Question (*)</h3>
    <p>Votre genre</p>
    <form>
        <input type="radio" />
        <label>Masculin</label>
        <br>
        <input type="radio" />
        <label>Autre</label>
        <br>
        <input type="radio" />
        <label>Féminin</label>
        <br>
    </form>

    <h3> Question (*)</h3>
    <p>Votre profession</p>
    <form>
        <label>Réponse :</label>
        <br>
        <textarea rows="5" cols="100"></textarea>
    </form>

    <hr>

    <h2>Votre regard sur les couleurs</h2>

    <h3> Question</h3>
    <p>Que vous évoquent les couleurs ?</p>
    <form>
        <label>Réponse :</label>
        <br>
        <textarea rows="15" cols="100"></textarea>
    </form>

    <h3> Question</h3>
    <p>Quelle couleur préférez vous ici ?</p>
    <form>
        <input type="radio"/>
        <label>Vert</label>
        <br>
        <input type="radio"/>
        <label>Bleu</label>
        <br>
        <input type="radio"/>
        <label>Pourpre</label>
        <br>
    </form>

    <hr>

    <button>Valider</button>
</body>
</html>

Concernant la génération de code souhaitée, on notera que:

  • Une question obligatoire reçoit le suffixe (*)

  • On fait le choix suivants pour la taille des boîtes de réponse pour les questions ouvertes :

    • SMALL: 5 lignes, 100 colonnes

    • MEDIUM: 10 lignes, 100 colonnes

    • LARGE: 15 lignes, 100 colonnes

  • Le rendu HTML demandé n’est pas parfait car il n’empêche pas de sélectionner plusieurs options dans une question fermée. On suppose que cette amélioration est prévue pour une amélioration future.

5.2. Préparation de Visual Studio Code

Si vous n’avez pas l’extension Langium installée dans votre installation Visual Studio Code, vous devez l’installer de la manière suivante :

  • Téléchargez le fichier langium.langium-vscode-4.0.0.vsix en cliquant ici.

  • Dans le volet Extensions à gauche, cliquez sur le menu … en haut, et choisissez Install from VSIX, puis choisissez le fichier téléchargé à l’étape précédente.

vscode install extension
Malheureusement pour des raisons techniques vous ne pouvez pas installer l’extension Langium directement depuis Visual Studio Code comme en TP.

5.3. Préparation de votre projet Langium

Nous n’allons pas utiliser le générateur Yeoman comme en cours, à la place vous allez partir d’un projet pré-généré.

Récupérez le code du projet formdsl-template.

Vous avez désormais un projet Langium prêt à l’emploi pour l’exercice, déjà configuré pour produire un éditeur FormDSL fonctionnant sur les fichiers avec pour extension .form.

5.4. Travail demandé

Vous devez implémenter la syntaxe du DSL présenté ci-dessus à l’aide du framework Langium.

5.4.1. Question 1 − Syntaxe abstraite

Dans le fichier packages/language/src/form-dsl-abstract-syntax.langium, implémentez en Langium la syntaxe abstraite souhaitée du DSL FormDSL à l’aide de Declared Types.

5.4.2. Question 2 − Syntaxe concrète

Dans le fichier packages/language/src/form-dsl.langium, implémentez en Langium la syntaxe concrète souhaitée du DSL FormDSL à l’aide de règles de grammaires.

5.4.3. Question 3 − Test du DSL et exemple de programme

  1. Dans votre projet, créez un nouveau sous-répertoire examples

  2. Déployez votre DSL dans une seconde fenêtre Visual Studio Code.

  3. Dans ce second Visual Studio Code, faites File → Open Folder, puis choisissez le répertoire examples que vous venez de créer.

  4. Dans ce nouveau sous_répertoire, à l’aide de votre DSL, créez le fichier couleurs.form contenant l’exemple de programme donné dans l’énoncé.

5.4.4. Question 4 - Générateur de code

Dans le fichier packages/language/src/form-dsl-code-generator.ts, implémentez en TypeScript le générateur de code souhaité pour FormDSL.

Vous êtes libres d’organiser votre générateur de code comme vous le souhaitez, en une seule fonction ou en plusieurs.

Pour rappel, vous pouvez tester votre générateur de code en exécutant la commande suivante depuis le répertoire examples créé précédemment:

../packages/cli/bin/cli.js generate couleurs.form couleurs.html