1. Introduction

Répéter son vocabulaire d’allemand directement sur un site web me semble être un super projet pour améliorer mon niveau d’allemand et ainsi faire de meilleur notes.
Cette idée m’est venue lorsque j’ai reçu une très mauvaise note d’allemand et que j’ai remarqué que je n’arrivais pas à répéter mon voc du fait de tout les autres devoirs plus urgent. Il est temps d’y remédier pour remonter ma moyenne d’allemand. Malheureusement, le projet me semble très vaste et je compte créer le squelette et mettre le design de côté à moins d’une avancée fulgurante.
Ce projet demande la création d’un algorithme et j'ai à disposition une base de donnée créée spécialement pour, ce projet est de l’ordre de l’informatique de gestion.
Les enjeux inhérents de ce projet sont d’améliorer mon niveau de vocabulaire pour avoir des discussions plus construites et de meilleurs moyen de m’exprimer lors d’un écrit. Mais aussi de monter une application sur une plateforme accessible a tous. La base de donnée test sera constituée d’une petite partie du vocabulaire contenu dans le livre, “vocabulaire allemand pour les études secondaires supérieures.” Mayor C.-A., Slembek E., Bovey M., 2008, CADEV, Lausanne. Elle restera à usage privé à cause des droits intellectuels.

2. Matériel et méthode

2.1 Matériel

Matériel utilisé:

  • 1 Ordinateur Macbook Pro 16"
  • 1 serveur de base donnée phpMyAdmin hébergé chez Infomaniak
  • Vocabulaire allemand pour les études secondaires supérieures

2.2 Méthode

Ce problème est entièrement software (sauf pour le vocabulaire qui vient du livre) et je l'ai divisé en 3 étapes:

  1. Scénario utilisateur
  2. Base de données
  3. Programmation

Le problème a dû être morcelé en plusieurs petites parties pour des raisons de simplicité. C'est pourquoi j'ai commencé par écrire un scénario des possibilités de l'utilisateur qui visite mon site, détaillé ci-dessous. Ensuite je suis passé à un niveau encore plus fin, où je décris les étapes du programme, du pseudo-code. En même temps, grâce au scénario, je vais aussi faire ressortir quelles sont les tables (stockées dans la base de donnée) dont j'ai besoin pour mon application web. Pour finir, on peut passer à la réalisation concrète du tout, la programmation.

2.2.1 Scénario utilisateur

  • Arrivée sur la page de mon application
  • Authentification
    • Test si l'utilisateur existe déjà
      • Oui, accès au menu principal
      • Non, création dans la table utilisateur et accès au menu principal
    • Quitter l'application
  • Menu principal: options
    • Répéter son vocabulaire
      • Début de la boucle
        • Afficher une fiche de vocabulaire de manière aléatoire
        • Afficher la traduction sur demande de l'utilisateur (bouton)
        • Pose la question: "Connaissais-tu la traduction?"
        • Options
          • Oui (mettre à jour la statistique)
          • Non (mettre à jour la statistique)
          • Quitter la boucle (retour au menu principal)
        • Répéter la boucle
    • Consulter ses statistiques (voir sa progression)
    • Retour à l'accueil
    • Réinitialiser son processus d'apprentissage
      • Réinitialisation des compteurs
      • Retour au menu

2.2.1.1 Authentification

L'authentification sert à créer plusieurs sessions qui ont chacune une ligne pour un suivi de notre progression. Voici comment je veux le programmer.

  1. Début d'une session pour mémoriser les variables par client
  2. Connexion à la base de donnée. Pour que je rapatrie les valeurs de connexion et demande à afficher les erreurs lors des connexions
  3. Formatage de la page
  4. Création d'un champ Nom d'utilisateur et Mot de Passe, sauvegarder sous $n et $l
  5. Lien sur une page adjacente pour créer son utilisateur et son mot de passe
  6. Test si les valeurs rentrées sont dans la base de donnée. Si oui passer à l'étape 7, si non, envoi sur la page adjacente
    • Insertion de la valeur $n dans la table Utilisateur dans le champ Utilisateur, pour la valeur $n dans la colonne Mot_de_passe et de 0 dans le Nbre_de_Login
  7. Connexion au menu principal

2.2.1.2 Menu principal

Dès que l'identité de l'utilisateur sera vérifiée, il pourra accéder au menu principal. Celui-ci sera composé de 4 options:
  1. Répéter son vocabulaire
  2. Consulter ses statistiques
  3. Quitter l'application
  4. Réinitialiser son parcours

2.2.1.3 Répéter son vocabulaire

  1. Bouton Allemand
    1. Affiche un mot aléatoire grâce à une fonction et à une requête SQL
  2. Bouton Traduction
    1. Affiche la traduction française du mot
    2. Bouton Oui
      1. Met à jour la statistique du mot en question pour l'utilisateur (incrémente le compteur de réussite)
    3. Bouton Non
      1. Met à jour la statistique du mot en question pour l'utilisateur (incrémente le compteur d'échec)
  3. Bouton Quitter
    1. Retour au menu principal

2.2.1.4 Statistiques de l'utilisateur

  1. Affichage  des données statistiques de l'utilisateur par mot affiché, si il y en a (nombre d'affichage, nombre de bonne réponse et nombre d'échec)
  2. Bouton Quitter
    1. Retour au menu principal

2.2.1.5 Réinitialisation des statistiques de l'utilisateur

  1. Bouton Confirmer la réinitialisation
    1. Efface les données statistiques de l'utilisateur par mot affiché, si il y en a (nombre d'affichage, nombre de bonne réponse et nombre d'échec)
  2. Bouton Quitter
    1. Retour au menu principal

2.2.1.6 Retour à la page d'accueil

  1. Lien vers la page d'accueil

2.2.2 Base de données

J'ai besoin d'une table utilisateur pour contrôler l'accès des personnes. De plus, une table constituée de mot de vocabulaire à répéter. Finalement la table des statistiques permet de faire le suivi de l'utilisateur pendant ses répétitions de vocabulaire.

2.2.2.1 Table Utilisateur

Capture d’écran 2018-05-14 à 11.48.13.pngFigure 1

2.2.2.2 Table Vocabulaire

Capture d’écran 2018-05-14 à 11.48.29.pngFigure 2

2.2.2.3 Table Statistiques

Capture d’écran 2018-05-14 à 11.47.47.pngFigure 3

3. Résultat

L'ensemble du projet est axé sur la programmation, il m'a fallu beaucoup de temps pour tout morceler et écrire. Pour imaginer et morceler le problème, j'ai passé plus de 5 heures, et pour la programmation en elle-même 30 heures environ.

3.1 Page d'accueil

Lorsque l'on arrive sur mon site: https://dev.gyre.ch/benoit.pecoud/index.php, deux champs et deux liens sont visible pour l'utilisateur:

Capture d’écran 2018-05-14 à 10.45.06.pngFigure 4

Pour l'instant, il n'y a besoin que de mettre un nom d'utilisateur comme je n'ai pas eu le temps de programmer le test de l'existence de l'identifiant de l'utilisateur dans la base de donnée.

3.2 Page de menu

Dès qu'un identifiant a été rentré, il arrive sur un menu composé de 4 options

Capture d’écran 2018-05-14 à 10.46.40.png

Figure 5

L'identifiant est affiché et est rapatrié dans chaque page car il est nécessaire pour la base de donnée et les sauvegardes des actions de l'utilisateur.

3.3 Répéter son vocabulaire

Cette page est la plus complexe car elle comporte plusieurs étapes:

Capture d’écran 2018-05-14 à 10.47.02.pngFigure 6

Nous avons 3 boutons. Il faut d'abord appuyer sur le bouton Allemand qui permet de retourner aléatoirement un mot en allemand

Capture d’écran 2018-05-14 à 10.47.21.pngFigure 7

le mot en lui-même et sa description complète sont clairement montrés à l'utilisateur. Ensuite le bouton Traduction permet de retourner la traduction du mot en français, comme montré ci-dessous:

Capture d’écran 2018-05-14 à 10.47.42.pngFigure 8

Ensuite, avec la condition du bouton Traduction, on affiche 2 nouveaux boutons, Oui et Non, qui vont modifier la table Statistiques de la base de données. (nombre d'affichage, nombre de bonne réponse et nombre d'échec)

Enfin, sur chaque page, il y a un bouton ou un lien pour revenir au menu et ensuite à la page d'accueil.

3.4 Statistiques

Elle permet de montrer les statistiques stockées dans la base de données par utilisateur.

Capture d’écran 2018-05-14 à 10.48.09.pngFigure 9

On voit que l'utilisateur "benoit" n'a répété qu'un seul mot, comme je sauvegarde les mots avec leur "id", j'ai dû concaténer le mot_allemand contenu dans la base de données Statistiques avec le champ "id" dans la base de données Vocabulaire.

3.5 Réinitialiser ses statistiques

Pour finir la dernière option est le fait de pouvoir faire "table rase" de sa progression et recommencer:

Capture d’écran 2018-05-14 à 10.48.31.pngFigure 10

J'ai mis un bouton pour confirmer la réinitialisation pour être sur qu'on n'ait pas appuyé sur le lien par inadvertance.

Quand on appuie dessus, je fais un delete dans la table même si il serait plus intéressant de garder les données qui seraient cachées. Cependant le manque de temps m'a forcé à abandonner cette option.

Capture d’écran 2018-05-14 à 10.49.02.pngFigure 11

Un message de réussite s'affiche s'il n'y a pas de problème.

4. Discussion

J'ai eu pas mal de difficulté que je liste ci-dessous:

  1. Apprendre certaines fonctions php
    1. <Form> pour les boutons
    2. Test if
    3. Boucle (while)
    4. Fonction random
    5. Gestion des variables
    6. Intégration au sein d'une page html
    7. Débutant en SQL, j'ai dû demander à gauche et à droite des informations complémentaires
  2. Imaginer des moyens de résoudre les problèmes rencontrés
    1. Test sur l'existence de l'identifiant utilisateur (non résolu)
    2. Trouver un enregistrement de manière aléatoire
    3. relations-entités SQL
  3. CSS, trop complexe et manque de temps. J'ai préféré que le tout fonctionne plutôt que d'avoir une jolie page qui ne fonctionne pas
  4. Pendant l'Ascension (les 4 jours en entier), j'ai représenté le gymnase de Renens à une convention de latin à Arpino en Italie et de ce fait, je n'ai pas pu consacrer assez de temps à terminer le projet et le blog

Comme j'ai réussi ce projet dans sa quasi-totalité, je suis très heureux d'avoir démontré mes capacités à surmonter les difficultés et à organiser mes idées.

Du fait de la complexité des possibilités de l'utilisateur, il m'a semblé très important de modulariser les différents composants de l'application.

Ce projet m'a énormément aidé pour essayer de penser comme un programmeur aguerri. Cela me montre, tous les progrès que j'ai encore à faire de ce point de vue là

J'ai trouvé difficile le fait de rester bloqué pendant 2 heures sur un problème où il manque juste  un point-virgule ou alors une parenthèse. Ce sentiment de frustration est heureusement très souvent remplacé par la joie de la réussite.

Malheureusement je n'ai pas eu le temps de décrire le code sur le blog mais il est disponible dans le git, sur mon répertoire home (git commit ne marchait pas).

5. Conclusion

Dans l'ensemble, je sens que j'ai réussi ce que j'ambitionnais et j'ai remarqué qu'il était difficile de programmer sans s'organiser.

Mon projet pourrait être utile à des fins pédagogiques pour moi et pour d'autres personnes qui ont besoin de mémoriser leur vocabulaire, cependant il faudrait grandement remplir la table Vocabulaire.

Un des buts avancés que j'aurai bien voulu réaliser, était le fait de faire répéter plus souvent un mot qui n'était pas bien connu par l'utilisateur. Cela demande un travail de réflexion et une complexité supplémentaire.

J'ai repéré des possibilités d'optimiser le programme, mais je n'ai pas eu le temps de m'y consacrer pleinement.

Références

Sites qui m'ont aidé à trouver des informations pour construire mon projet:

  • https://www.w3schools.com/, dernier accès le 14 mai 2018
  • http://php.net/manual/fr, dernier accès le 14 mai 2018
  • https://dev.gyre.ch/javier.iglesias/test.php, dernier accès le 14 mai 2018