Aux nouvelles
Dernière semaine
Les ressources de la dernière semaine de cours sont disponibles. Nous aborderons les technologies XML. Pas de capsule, mais des transparents (et des ressources). N'hésitez pas à me poser des questions.
Mustache
Le sujet de la démo sur Mustache est disponible. Vous pouvez intégrer Mustache dans votre devoir #2.
Il n'y a pas de capsule pour le cours sur Mustache mais des exemples et des transparents. N'hésitez pas à me poser des questions.
Demo REST
Le sujet de la démo sur REST est maintenant disponible. Désolé du retard. Avaancer dans cette démo vous avancera de manière significative dans le devoir.
Devoir #2
Le devoir #2 est disponible. À remettre individuellement.
Planche de démo 6
Une planche de démo est diponible qui vise à vous connecter sur le serveur MySQL du DIRO et d'étudier un tutoriel décrit en cours.
Reprise des cours à distance
Vous avez un reçu un message à cet effet, en gros: reprise des cours à distance, changement de mode d'évaluation (pas de final, le devoir 2 est à remettre individuellement), 4 semaines de cours (incluant cette semaine). Des capsules vidéo sont disponibles sur Studium pour vous aider (ou pas). Je suis bien sûr à l'écoute par mail (entête IFT3225) ou via le forum. Merci de ne pas divulguer les capsules vidéo (mp4).
Cours du 10 mars
En raison d'un jury de thèse, je ne peux me rendre à la première heure du cours qui commencera donc à 12h30.
Notes Intra
Les notes de l'intra sont disponibles sur Studium. Vous avez été 40 à composer l'examen, la moyenne est de 13.75/20, la note maximale est de 19.8. Une permanence sera donnée prochainement afin que vous puissiez venir voir vos copies.
Examen Intra
Je vous rappelle la tenue de l'examen intra en salle N-515 du Pav. Roger Gaudry, le vendredi 21 février de 10h30 à 12h30. L'examen porte sur toute la matière vue à date. Vous avez le droit à 3 pages (us-letter) recto-verso de notes manuelles. Voici à titre indicatif les examens de la dernière session où j'ai enseigné ce cours. Nous n'avons pas encore vu les technologies XML, ni le scriptage côté serveur, ces questions ne sont donc pas pertinentes pour le moment: [Intra-H18-IFT3225.pdf], [Final-H18-IFT3225.pdf].
Les cours reprennent cette semaine
J'utiliserai certainement la séance de TP de vendredi pour avancer
Foire aux stages
Vous cherchez un stage ou souhaitez prendre contact avec les industries locales ? Ne ratez pas la foire aux stages et emplois d'Ivado le 22 janvier (10h-15h).
Cours de vendredi 10 janvier annulé
Pas non plus de laboratoire cette semaine. À mardi !
Premier cours
Bienvenue sur la page du cours IFT3225. Le premier cours a lieu mardi 7 janvier 2020 à 11h30 en salle S-144 (Pav. Roger Gaudry).
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 readme
code> 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'attributend
et de la relationrel
de chaque élément dansedges
. Ainsi, vous devez afficher des choses comme:calculator, computer, laptop, micro ordinateur, mini ordinateur
, etc. sont des synonymes du conceptordinateur
-
montre intelligente, multiprocesseur, organigramme de programmation, session, téléphone intelligent
, etc. sont des concepts reliés àordinateur
processeur
est une partie d'unordinateur
- les valeurs non
null
des attributssurfaceText
, 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
- 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).
- 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.
- Faites votre page HTML à l’aide de Bootstrap
- 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.
- 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 !