Skip to content

Note App (Calepin) – Rétro-engineering

Objectif

Analyser une application simple de prise de notes
sans documentation au départ.

Le but est de : - comprendre le fonctionnement de l’application - comprendre les actions de l’utilisateur - comprendre les données utilisées - faire des diagrammes simples

Description du projet

Cette application permet à l’utilisateur de : - créer une note - écrire du texte - valider une note - lire une note validée (lecture seule)

Le projet est une analyse de l’application (rétro-engineering).

Structure du projet

  • src/ : code de l’application (HTML / JavaScript)
  • docs/ : documentation et diagrammes
  • README.md : description du projet

1. Cas d’utilisation (Use Case)

Ce diagramme montre ce que l’utilisateur peut faire.

Actions possibles : - créer une note - écrire ou modifier le texte - valider la note - consulter une note validée

Image : Use Case

Fichier : - use-cases.md

2. Diagramme de séquence

Ce diagramme montre les échanges entre : - l’utilisateur - la vue (View) - le contrôle (Control) - le modèle (Model)

Exemple : - l’utilisateur clique sur Validate - le contrôle traite l’action - le modèle enregistre la note - la vue affiche le résultat

Image : Diagramme de séquence

Fichier : - sequence-validate-note.md

3. Diagramme d’activité

Ce diagramme montre les étapes internes du système.

Étapes : 1. clic sur le bouton Validate 2. récupération du texte 3. enregistrement dans le modèle 4. affichage en lecture seule

Image : Diagramme d’activité

Fichier : - activity-validate-note.md

4. Modèle des données (Diagramme de classes)

Ce diagramme montre les données principales.

Classes : - Note (id, content) - Model (liste de notes)

Relations : - le modèle gère plusieurs notes

Image : Diagramme de classes

Fichier : - class-diagram.md

5. Wireframe

Le wireframe montre l’interface de l’application.

États : - aucune note - note en modification - note validée (lecture seule)

Image : Wireframe

6. Propositions d’amélioration

Idées simples : - mieux organiser le code - séparer les responsabilités - ajouter des commentaires - améliorer l’interface

Fichier : - interventions.md

Technologies utilisées

  • HTML
  • JavaScript
  • Markdown
  • PlantUML
  • draw.io

Liens

Dépôt GitLab : https://gitlab.com/ahmadola111-group/note-app-retroengineering

Documentation (site) : https://ahmad-docs-b3e3cc.gitlab.io/sexta/