- Ce TP constitue la deuxième partie du projet final à rendre pour le 5 juin (Rappel : travail en binôme)
- L'énoncé présente essentiellement des fonctionnalités qui sont à implémenter en vuejs, grâce à toutes les notions abordées précédemment.
- La façon d'implémenter ces fonctionnalités est laissée libre, y compris au niveau de l'aspect visuel.
Mise en place
- Comme vu en TD 6, ce n'est pas une bonne idée de manipuler directement les données reçus via une API Web.
- Si on procède comme cela pour le projet, on ne pourrait pas appeler directement les méthodes buy() et assign() de la classe Perso.
- C'est pourquoi les données reçues servent à créer des instances de classes, dont les attributs correspondent généralement à ceux des données reçues.
- Dans ce projet, il va falloir récupérer des items, des personnages avec des slots contenant des items, et éventuellement des rues contenant des boutiques contenant des items. Pour représenter tout cela, il faut donc créer des classes Item, Slot, Perso, et éventuellement Shop et Street.
- Chacune de ces classes contient notamment une méthode fromObject() permettant de créer une instance à partir d'un objet reçu via l'API.
- Pour faciliter l'implémentation, vous pouvez télécharger [ model.js ], qui contient toutes ces classes.
Exercice 1 - La boutique (version basique)
- Via l'API web, vous devez récupérer la liste de tous les items disponibles en BdD lors du chargement de la page.
- Vous devez ensuite créer une boutique contenant X items tirés au sort dans cette liste.
- A chaque item acheté, celui-ci est retiré des artciles disponibles.
- Quand la boutique est vide, on retire de nouveau X items au sort.
Exercice 2 - Le personnage
- Via l'API Web, vous devez récupérer la liste de tous les personnages disonibles en BdD lors du chargement de la page.
- Le principe utilisé dans le TP 5 pour sélectionner un personnage doit donc faire cette sélection parmi la liste reçue.
- Quand on affecte un item acheté à un des slots du personnage, il faut également mettre à jour ce slot dans la Bdd, grâce à l'API web.
Exercice 3 - Le maître du jeu
- Toute création de nouvel imte ou de nouveau personnage doit être répercuté en BdD grâce à l'API web.
Exercice optionnel - La ville
Description de l'API Web
ATTENTION ! les types de requêtes et les chemins d'accès ne sont pas forcément les mêmes que dans le TD.
accès :
- Au lieu de gérer une seule boutique, vous récupérez via l'API web la liste des rues de la ville, chacun contenant un certain nombre de boutiques.
- La page de l'application permet donc de sélectionner une rue et une boutique dans laquelle le personnage courant va faire ses achats.
- l'API web ne permettant pas de supprimer un item d'une boutique, la fait d'acheter un item dans une boutique fait simplement disparaître ce dernier de la liste affichée. En revanche, il n'y a pas de changement en BdD.
- En mode maître de jeu, il est possible d'ajouter un item dans un boutique, ce qui doit mettre également à jour la BdD.
Description de l'API Web
ATTENTION ! les types de requêtes et les chemins d'accès ne sont pas forcément les mêmes que dans le TD.
accès :
- l'API est accessible sur 2 serveurs :
- http://prodigy.iut-bm.univ-fcomte.fr:3334/rpg/... : ne fonctionne que si vous êtes en VPN université.
- http://rpg.dut-info.cf/rpg/... : pas besoin de VPN
- les données envoyées sont vérifiées en terme de type et format.
- sauf exception, les chaînes de caractère sont limitées à une taille de 50.
- il n'y a pas de vérification spéciale sur les caractères inderdits, du contenu spécial, ... excepté pour certains chaînes (type items,nom de slot, ...) qui ont un ensemble limité de valeurs. Vous pouvez donc tester ce qui arrive quand des données contiennent par exemple du JS.
1 - les items
- chemin : items/get, type : GET - obtenir la liste de tous les items (par ex, http://prodigy.iut-bm.univ-fcomte.fr:3334/rpg/items/get)
- envoi : rien,
- retour : un tableau d'objet, chacun représentant un item.
- chemin : items/create, type POST - créer un nouvel item.
- envoi : objet au format { name: String, type: String, price: Number, effect: String }. type doit correspondre à l'une des catégories définie dans model.js. effect est au format : une lettre parmi A,S, L, suivie par un + ou -, suivi par un nombre entre 0 et 999.
- retour : objet au format { err:Number, data:Object}. Si err vaut 1, l'item n'a pas pu être créé et data contient le message d'erreur. Si err vaut 0, l'item a été inséré dans la BdD et data contient un objet le représentant.
2 - les personnages
3 - les rues
4 - les boutiques
- chemin : persos/get, type: GET - obtenir la liste de tous les personnages.
- envoi : rien
- retour : un tableau d'objet, chacun représentant un personnage.
- chemin : persos/create, type POST - créer un nouveau personnage.
- envoi : un objet au format { name: String, level: Number, gold: Number, life: Number, vitality: Number, strength: Number, armor: Number }.
- retour : un objet au format { err:Number, data:Object}. Si err vaut 1, le personnage n'a pas pu être créé et data contient le message d'erreur. Si err vaut 0, le personnage a été inséré dans la BdD et data contient un objet le représentant.
- chemin : persos/updateslot, type PUT - mettre à jour la liste des items d'un slot.
- envoi : objet au format { id: String, slotName: String, items: Array }. id est l'identifiant du personnage (cf. attribut _id), slotName est le nom du slot à mettre à jour, et items contient le tableau des items de ce slot (NB : ces items doivent exister dans la collection items)
- retour : objet au format { err:Number, data:String}. Si err vaut 1, le slot n'a pas pu être mis à jour et data contient le message d'erreur. Si err vaut 0, le slot contient la liste d'item qui a été fournie et data contient le mot 'ok'.
3 - les rues
- chemin : streets/get, type GET - obtenir la liste de toutes les rues.
- envoi : rien
- retour : un tableau d'objet, chacun représentant une rue.
- chemin : streets/create, type : POST - créer une nouvelle rue
- envoi : un objet au format { name: String}
- retour : un objet au format { err:Number, data:Object}. Si err vaut 1, la rue n'a pas pu être créée et data contient le message d'erreur. Si err vaut 0, la rue a été insérée dans la BdD et data contient un objet la représentant.
4 - les boutiques
- chemin : shops/create, type : POST - créer une nouvelle boutique dans une rue donnée
- envoi : un objet au format { id: String, name: String, type: String}. id est l'identidiant de la rue où la boutique doit être créée, type est le type de la boutique (liassé libre)
- retour : un objet au format { err:Number, data:Object}. Si err vaut 1, la boutique n'a pas pu être créée et data contient le message d'erreur. Si err vaut 0, la boutique a été insérée dans la BdD et data contient un objet la représentant.
- chemin : shops/additem, type : PUT - ajoute un item à une boutique.
- envoi : un objet au format { idShop: String, idItem: String}.
- retour : un objet au format { err:Number, data:Object}. Si err vaut 1, la boutique n'a pas pu être créée et data contient le message d'erreur. Si err vaut 0, la boutique a été insérée dans la BdD et data contient la chaîne 'ok'.