18P — Driller de vocabulaire d’allemand
Par admin le lundi, mai 14 2018, 12:00 - 2017-2018 - Lien permanent
Ce projet a été réalisé par Benoît PÉCOUD. Mon application est accessible à l'adresse: https://dev.gyre.ch/benoit.pecoud/index.php
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:
- Scénario utilisateur
- Base de données
- 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.
- Début d'une session pour mémoriser les variables par client
- Connexion à la base de donnée. Pour que je rapatrie les valeurs de connexion et demande à afficher les erreurs lors des connexions
- Formatage de la page
- Création d'un champ Nom d'utilisateur et Mot de Passe, sauvegarder sous $n et $l
- Lien sur une page adjacente pour créer son utilisateur et son mot de passe
- 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
- 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:- Répéter son vocabulaire
- Consulter ses statistiques
- Quitter l'application
- Réinitialiser son parcours
2.2.1.3 Répéter son vocabulaire
- Bouton Allemand
- Affiche un mot aléatoire grâce à une fonction et à une requête SQL
- Bouton Traduction
- Affiche la traduction française du mot
- Bouton Oui
- Met à jour la statistique du mot en question pour l'utilisateur (incrémente le compteur de réussite)
- Bouton Non
- Met à jour la statistique du mot en question pour l'utilisateur (incrémente le compteur d'échec)
- Bouton Quitter
- Retour au menu principal
2.2.1.4 Statistiques de l'utilisateur
- 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)
- Bouton Quitter
- Retour au menu principal
2.2.1.5 Réinitialisation des statistiques de l'utilisateur
- Bouton Confirmer la réinitialisation
- 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)
- Bouton Quitter
- Retour au menu principal
2.2.1.6 Retour à la page d'accueil
- 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
Figure 1
2.2.2.2 Table Vocabulaire
Figure 2
2.2.2.3 Table Statistiques
Figure 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:
Figure 4Pour 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
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:
Figure 6
Nous avons 3 boutons. Il faut d'abord appuyer sur le bouton Allemand qui permet de retourner aléatoirement un mot en allemand
Figure 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:
Figure 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.
Figure 9On 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:
Figure 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.
Figure 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:
- Apprendre certaines fonctions php
- <Form> pour les boutons
- Test if
- Boucle (while)
- Fonction random
- Gestion des variables
- Intégration au sein d'une page html
- Débutant en SQL, j'ai dû demander à gauche et à droite des informations complémentaires
- Imaginer des moyens de résoudre les problèmes rencontrés
- Test sur l'existence de l'identifiant utilisateur (non résolu)
- Trouver un enregistrement de manière aléatoire
- relations-entités SQL
- 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
- 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