TP2: ConceptNet et Ajax/MySQL/REST/Sammy.js

Contexte

Dans ce devoir que vous remettrez individuellement, vous allez pratiquer la création d’un site web en une seule page (à l’aide de Sammy.js), les interfaces REST et les bases MySQL. Vous devez effectuer ce devoir individuellement. Votre projet doit être abrité au DIRO. Vous devez remettre un fichier readmecode> qui contient l'URL de votre site (abritée au DIRO), ainsi que votre page HTML et toutes ses dépendances (css, javascript, templates, etc.) sous un unique fichier tar.gz (ou gzip). Vous pouvez également joindre un rapport au format pdf indiquant les spécificités de votre devoir. La remise est à effectuer sur Studium.

Cahier des charges

Vous devez fournir une page devoir2.html qui offre à un utilisateur de naviguer à travers les concepts de ConceptNet. La communication au serveur de ConceptNet se fera par requêtes Ajax à l'API REST disponible. En ce sens, vous allez vous placer comme client d'un service REST existant. L'organisation des routes de votre application sera également teintée de la logique REST, vous placant d'une certaine façon comme le créateur d'un service REST donnant accès (en lecture) à ConceptNet. En cours d'utilisation de la page, votre application doit colliger dans une base de données MySQL les assertions rencontrées dans les réponses aux requêtes Ajax (attribut surfaceText), comme par exemple: [[printemps]] is a translation of [[spring]]).

Les requêtes à ConceptNet doivent se faire en Ajax, l'exposition des routes (URI) doit se faire en Sammy.js (cours de cette semaine) et la gestion MySQL soit se faire via requêtes Ajax à du code PhP (vous pouvez recycler du code vu en cours ou tout autre code que vous prendrez soin d'identifier).

Voici la liste des routes que je vous demande d'exposer dans votre application; vous pouvez en ajouter. Notez qu'il vous est possible d'ajouter des paramètres à chaque route (ex: #concept/:lg/:id?offset=21).

#accueil

Il s'agit de la route principale vers laquelle toutes les autres routes pointent. Elle offre un choix à l'utilisateur de:

  • Se connecter.
  • Lister des concepts de ConceptNet.
  • Consulter un concept de ConceptNet.
  • Consulter la BDD des assertions.
  • Jouer.

#login

Seuls les utilisateurs autorisés peuvent utiliser votre application (notamment car une base de données sera colligée au fur et à mesure des interactions). Sont autorisés au moins vous (...) ainsi que le démo (login: demo passwd: ift3225) qui devra faire des tests.

Cette route affiche un formulaire qui permet à un utilisateur de saisir ses informations de connexion (login et mot de passe). En cas de succès, un retour à la page d'accueil est effectué avec un message de bienvenue à l'utilisateur connecté (ex: bienvenue démo). La première option (se connecter) ne doit alors plus être visible. En cas d'échec, un message d'erreur doit être affiché et l'utilisateur doit resaisir son login et son mot de passe. Notez que se connecter n'est à faire qu'une seule fois: vous devez gérer une session (très facile en Sammy.js).

#concept/:lg/:id

Permet à l'utilisateur de consulter le concept :lg/:id. Voici un exemple de réponse de l'API de conceptNet pour le mot ordinateur. L'information suivante doit être affichée:

  • le label de l'attribut start, de l'attribut end et de la relation rel de chaque élément dans edges. Ainsi, vous devez afficher des choses comme:
    • calculator, computer, laptop, micro ordinateur, mini ordinateur, etc. sont des synonymes du concept ordinateur
    • montre intelligente, multiprocesseur, organigramme de programmation, session, téléphone intelligent, etc. sont des concepts reliés à ordinateur
    • processeur est une partie d'un ordinateur
  • les valeurs non null des attributs surfaceText, comme "[[ordinateur]] is a translation of [[calculator]]"

Cette information doit être affichée de façon élégante et doit reprendre le système de pagination offert par ConceptNet (attribut: view). Vous noterez que certaines informations sont dans d'autres langues que la langue spécifiée (ex: コンピュータ est synonyme en japonais du concept ordinateur). Il n'est pas nécessaire de filtrer cette information.

#concept/:lg

Liste les concepts de ConceptNet disponibles dans la langue :lg. Vous devez paginer l'information (en utilisant l'attribut view), de sorte qu'un utilisateur très patient pourrait en cliquant énormément consuter la totalité de ConceptNet dans la langue :lg.

#query

Affiche un élément input qui permet à l'utilisateur de saisir un concept (mot) et qui passe le contrôle à la route #concept/:lg/:id. Si le concept n'est pas présent, l'utilisateur est invité à saisir un nouveau concept ou à revenir à #accueil.

#db

Affiche une forme avec un élement de search et une fenêtre dans laquelle sont affichées les N (ex: N=10) assertions de la base de données qui contiennent la chaîne saisie dans l'entrée. À chaque modification de l'élément input, la vue doit se modifier. Lorsqu'aucun caractère n'est saisi, alors N assertions (par exemple les N premières dans la base) sont affichées. Il s'agit donc ici d'implémenter un kwic dynamique. Cette route contient un bouton (ou un lien) qui permet à l'utilisateur de revenir à la page d'accueil.

#game/:lg/:id

Propose à un joueur le mot :id dans la langue :lg et lui demande dans un temps limité (par exemple 30 secondes) de produire des concepts reliés (les concepts seront séparés par une virgule). À la fin du temps, un pointage des concepts proposés par l'utilisateur est effectué. Pour cela, une requête est faite à ConceptNet de façon à retrouver les (au moins) 100 liens (éléments end ou start des items de edges) du concept :lg/:id. Le pointage correspond au nombre de réponses en commun avec les liens de ConceptNet. Les réponses communes doivent être mises en évidence (par stylage, par injection de code HTML). Par exemple, si un joueur répond laptop, internet, mal du siècle, datamat, madonna pour le concept ordinateur, alors il recevra 3 points qui correspondent aux 3 concepts laptop, internet, datamat qui seront mis en évidence.

À la fin du jeu, un bouton (ou un lien) "rejouer" permet à l'utilisateur de recommencer sa partie (même concept) et un bouton (ou un lien) "accueil" lui permet de revenir à la route #accueil.

Conseils

  1. Vous pouvez commencer votre projet en plusieurs pages html (une par route), puis les réunir à l’aide de Sammy.js (ou tout autre framework de votre connaissance compatible avec l’environnement du DIRO).
  2. Utilisez JQuery pour faire vos requêtes Ajax. Cela simplifiera non seulement votre code, mais vous permettra de faire des requêtes au serveur de ConceptNet sans problème.
  3. Faites votre page HTML à l’aide de Bootstrap
  4. Si vous n’arrivez pas à gérer MySQL au DIRO, gérez votre base « à la mitaine » à l’aide d’opérations de lecture / écriture dans un fichier.
  5. Vous pouvez bonifier votre projet de pleins de façons. Vous pouvez par exemple enrichir les jeux offerts en imposant un type de relation particulière (ex: trouvez les parties d'un ordinateur), vous pouvez sauver les points d'un utilisateur et ses réponses; vous pouvez afficher des graphes de concepts, en réponse à certaines routes, etc. Si vous bonifiez votre projet, indiquez le dans votre rapport !