TP 2 : Etat de l existant et poursuite du projet

Transcription

1 TP 2 : Etat de l existant et poursuite du projet MBDS Haïti 16/02/2016 TP 2 : Etat de l existant et poursuite du projet 1

2 Présentation Générale L objectif de ce TP est de stabiliser votre base de projet et d ajouter de nouvelles fonctionnalités pour arriver à une version finale. Objectifs 1/ Création du projet Si vous étiez en avance sur le TP1 il se peut que vous ayez déjà attaqué cette étape, nous allons donc reprendre ici les objectifs fixés : - Vous avez au moins un projet vide que vous avez créé - Faites le tour de tous les fichiers de configuration, regardez les valeurs par défaut renseignées, certaines sont à définir, ne passez pas à côté. (grails-app/conf) - Définissez le modèle de données qui vous permettra de mener votre projet à bien. (grails-app/domain) - Générez les contrôleurs et les vues sur les éléments que vous avez précédemment créés. (dans le fichier du modèle) - Alimentez votre projet avec des données d initialisation (conf/bootstrap.groovy) La fin du cours contient tous les éléments qui vous permettront de boucler l intégralité de ces demandes. Une fois cette partie terminée, je vais vous demander d aller observer ce qu il s est passé côté base de données. Pour cela, nous allons faire en sorte d utiliser une base de donnée type «MySQL» pour avoir un PhpMyAdmin nous permettant d avoir une vue claire de notre base de donnée et du modèle créé. Si vous utilisez un autre SGBD peu importe, la procédure est la même, seul le driver et la chaine de connexion changent. TP 2 : Etat de l existant et poursuite du projet 2

3 Rappel du sujet : Nous allons créer une plateforme de gestion de points d intérêts (au sens large, si vous voulez la dédier à votre passion, faites-vous plaisir!). Ces points d intérêts pourraient être des lieux, personnes, objets, ce que vous souhaitez de matériel. Voici la liste des contraintes pour la réalisation de votre projet : - Votre POI aura, au minimum, un nom, un emplacement (physique, géolocalisation), une ou plusieurs images d illustration et une description. - Vos POIs seront répartis dans des groupes, ces groupes seront eux aussi nommés et illustrés. - Au sein d un groupe, les POIs ne peuvent apparaitre qu une seule fois, et y sont seront ordonnés, un POI pourra appartenir à un nombre illimité de groupes. - Un utilisateur pourra noter et commenter chacun des POIs et la fiche d un utilisateur permettra d accéder à tous les commentaires qu il a saisis. - Votre plateforme sera composée de 3 parties o Un backend d administration, qui permettra de créer / modifier / supprimer des Utilisateurs Groupes de POIs POIs o o Un frontend simple, qui présentera toutes ces données de la manière dont vous le souhaitez (le bon gout n est pas un critère de notation contrairement au bon sens et aux règles élémentaires d ergonomie) et qui vous permettra de naviguer simplement d une entité à l autre. Une couche de web services REST rendant du JSON qui pourra être exploité, par exemple, par une application mobile TP 2 : Etat de l existant et poursuite du projet 3

4 2/ Utilisation d une base de donnée type «MySQL» (optionnel) Je vais vous donner ici les éléments pour accomplir cette tâche. Si vous préférez utiliser un autre SGBD, libre à vous! 1) Installer MySQL 2) Télécharger le plugin Grails qui contient le connecteur MySQL - Allez sur cette page : - Récupérez la commande en tête de page pour ajouter cette dépendance à votre BuildConfig.groovy, validez la configuration dans le tooltip qui apparait - Exécutez un «compile» de votre projet afin de télécharger la nouvelle dépendance 3) Editez votre fichier «DataSource.groovy» pour le faire pointer sur votre nouvelle base de données : 4) Créez votre base de données, Grails crée les tables mais pas la base. 5) Relancez votre projet. Si vous voyez vos tables se créer, tout est bon! TP 2 : Etat de l existant et poursuite du projet 4

5 3/ Ajout de données Modifiez le «BootStrap.groovy» afin d avoir au lancement de votre projet au moins : - 5 utilisateurs différents - 3 groupes différents - 5 POIs pour chacun des groupes créés - Au moins un commentaire sur chaque POI Il y a de nombreuses façons d arriver au même résultat, voici un exemple : // On crée le groupe et on garde une référence sur ce dernier def groupealpha = new Groupe(name: "Groupe Alpha", img: "mon_image.png" [...]).save(flush:true, failonerror:true) // Puis on ajoute les POIs dans ce dernier groupealpha.addtopois(new POI(name: "POI Alpha", lat: 17.12, lng: 7.14 [...])) // On sauvegarde le parent, qui s'occupera de sauvegarder ses fils groupealpha.save(flush:true, failonerror:true) Vous avez aussi la possibilité si vous le souhaitez afin de rendre le code plus lisible et garder une référence sur le POI, de décomposer la deuxième ligne de code en deux, ce qui pourra donner : // On crée le groupe et on garde une référence sur ce dernier def groupealpha = new Groupe(name: "Groupe Alpha", img: "mon_image.png" [...]).save(flush:true, failonerror:true) // On crée un POI sans le persister et on garder une référence dessus def poialpha = new POI(name: "POI Alpha", lat: 17.12, lng: 7.14 [...]) // Puis on ajoute le POI précédemment créé dans le groupe groupealpha.addtopois(poialpha) // On sauvegarde le parent, qui s'occupera de sauvegarder ses fils groupealpha.save(flush:true, failonerror:true) Bonus (+2 point sur la partie projet) : Une fois votre Bootstrap validé, vous créerez des Services ou méthodes au sein d un même service afin de centraliser toutes vos créations d entités hors du Bootstrap. Vous pourrez ensuite réutiliser ces Services lorsque vous aurez besoin de créer des entités pour le «Frontend» TP 2 : Etat de l existant et poursuite du projet 5

6 4/ Construction de pages 1) Backend Il sera simplement généré en utilisant le scaffolding proposé par Grails, vous devrez peut être le modifier afin qu il soit parfaitement fonctionnel. Il devra évidemment permettre de créer / modifier toutes les entités existantes, vous pouvez pour cette partie conserver le design généré par Grails. Pensez tout de même à modifier la page d accueil de votre site pour la faire pointer sur un index avec un menu permettant de naviguer d une entité à l autre. Bonus (+2 points sur la partie projet) : Pour les parties relatives à l ajout / modification de fichiers image, mettez en place sans utiliser d extensions ou de librairies spécifiques, la possibilité d uploader les fichiers en Ajax en faisant un simple drag n drop du fichier sur le champ en question. 2) Frontend a. Page de login Créez une page de login pour vous identifier en tant qu utilisateur, cette donnée devra être conservée lors de la navigation - url d accès pour la page : /projet/login Il va sans dire qu avant de faire ceci, il faudra vous assurer que votre entité «User» possède les attributs nécessaires, à savoir un identifiant (qui pourrait être un mail / un identifiant à part) et un mot de passe. C est une question de bon sens mais les mots de passe doivent être au minimum «hashés» (MD5 / une autre méthode de votre choix) avant d être persistés et ce afin qu on ne puisse pas lire ces derniers dans votre base de données. Bonus (+2 point sur la partie projet) : Mettez en place un système de «Remember me» sur la page de login b. Page d utilisateur Construisez une page en vous inspirant des contrôleurs et vues générées respectant les contraintes suivantes : - url d accès pour la page : /projet/user/id_user - Différents bloc qui présenteront Les informations personnelles de l utilisateur Les différents commentaires écrits par l utilisateur ainsi qu un lien vers le POI en question Si l utilisateur en question est l utilisateur courant (identifié), vous devrez pouvoir éditer toutes les informations de ce dernier TP 2 : Etat de l existant et poursuite du projet 6

7 c. Les Groupes et POIs Construisez des pages permettant de créer (new), visualiser (show) et éditer (edit) les Groupes et les POIs, tous les attributs de ces derniers devront être modifiables - url d accès pour les pages : o /projet/group/id_group (show) o /projet/group/id_group/edit (edit) o /projet/group/id_group/create (new) o /projet/poi/id_poi (show) o /projet/poi/id_poi/edit (edit) o /projet/poi/id_poi/create (new) Un utilisateur connecté pourra commenter un POI depuis sa page de consultation (show) Bonus (+2 point sur la partie projet) : Faites en sorte que la liste de POIs au sein d un Groupe soit modifiable directement en drag n drop Ajax : - Présentez deux listes, l une représentant les POIs du Groupe, l autre représentant la liste des POIs qui peuvent y être ajouté - Les POIs pourront être réorganisés (ordre) au sein d un groupe aussi en drag n drop Bonus (+2 point sur la partie projet) : Mettez en place au niveau de la gestion des Groupes et Pois une Google Map, cette dernière vous permettra : - Au niveau d un POI de le visualiser sur la carte et de le déplacer directement depuis la carte, ce qui modifiera les coordonnées du point - Au niveau d un Groupe, de visualiser l intégralité des POI qu il «contient» sur la carte Bonus Dans ce TP vous verrez un certain nombre de parties «Bonus», chacune de ces parties, si réalisées, vous accordera des points en plus pour la partie «Projet» de votre notation (je compte au-delà de 20) qui représente 50% de votre moyenne dans cette matière. Rendu Ce projet sera noté à la fin des 5 séances et constituera une part importante de votre notation dans ce module. Si vous avez des questions, adressez-moi un mail à l adresse greg.galli@tokidev.fr, je ferai de mon mieux pour revenir vers vous le plus rapidement possible. Des bonus seront accordés aux groupes qui feront le choix d implémenter des parties «Bonus» / a ceux qui s appliqueront particulièrement sur la propreté du code Un design soigné et une bonne ergonomie sont des petits plus qui seront pris en compte dans la notation de votre projet sans l impacter de manière dramatique. TP 2 : Etat de l existant et poursuite du projet 7