Code Monkey home page Code Monkey logo

tp-spring-boot-puissance4's Introduction

Création d'un puissance 4 en Web avec SpringBoot en mode server-side-templating

La marche à suivre

  • Création du projet Allez sur https://start.spring.io/, il s'agit d'un outil permettant d'initialiser une application spring boot. Dans l'écran remplir les champs:

    • group : com.igs.ipi
    • artifact : tp-springboot-"votre nom"

    Spring boot étant très modulaire vous devez sélectionner ceux qui vous intéresse. Dans notre cas nous allons prendre (en cochant les cases en mode "full"):

    • web (pour faire du web)
    • JPA (=Java Persistance API : pour faire de l'hibernate)
    • HSQLDB (base de données SQL intégré
    • DEVTOOLS (pour faciliter le développement)
    • MUSTACHE (pour la création de page web dynamique)

    Cela permet de générer un zip contenant le squelette d'un projet à intégrer directement dans eclipse ou Intellij (choisir le mode import project maven). Vous devez pouvoir executer la classe com.igs.ipi.tpspringbootpetrillo.TpSpringBootPetrilloApplication#main. Pour le moment l'application doit démarrer mais ne rien faire

  • COMMIT first commit

  • Ajout d'une première page

  • COMMIT ajout controller et page

  • Ajout d'un Model (le M de MVC) le template game pour afficher des informations relatives à une partie de Puissance 4 a besoin de données qui seront contenues dans un objet GameModel, à créer dans le sous package model Ce Model contiendra pour le moment les noms des 2 adversaires : nom1 et nom2 (pensez au getter/setter vous pouvez les générer automatiquement par votre IDE)

    • Créer le service GameService dans le sous-package service, là aussi, c'est un bean spring. Ajouter la méthode newGame, cette méthode retournera une nouvelle instance de GameModel Pour commencer vous pouvez initialiser cette objet avec des noms d'adversaires codés en dur
    • Puis modifier le template game pour afficher les noms des adversaires. Pour cela votre controller va avoir besoin d'appeler le service, il va donc falloir lui injecter, puis dans la méthode newGame appeler la méthode du service et stocker fournir au template l'objet GameModel.
  • COMMIT affichage des noms des adversaires

  • Modifier la View et le Model pour afficher le tableau de jeu (largeur=7, hauteur=6). https://mustache.github.io/mustache.5.html

  • COMMIT affichage du tableau de jeu

  • Enregistrement de la partie en session. Dans un premier temps, une partie ne sera pas enregistrée en base de données mais sera mémorisée sur le serveur dans la session Web (Attention une session web = 2 adversaires qui jouent sur un même navigateur web).

    • Il va donc falloir créer un bean ayant pour scope session : PartieEnCours. Il s'agit d'un bean de type @Component et de scope Session. Ce bean contient une propriété de type GameModel https://docs.spring.io/spring/docs/current/spring-framework-reference/core.html#beans-factory-scopes
    • Modifier le controller, à la création d'une nouvelle partie, le gameModel correspondant devra être stocké dans le bean PartieEnCours. Il faut donc injecter le bean PartieEnCours dans le controller. Attention : pour injecter un bean Scope Session dans un bean scope Singleton, il faut que le bean scope Session soit annotée avec : @Scope(value = "session", proxyMode = ScopedProxyMode.TARGET_CLASS. Si vous le faite pas l'application ne devrait pas démarrer (configuration des beans spring incohérent)
    • Puis ajouter une nouvelle méthode dans le controller pour gérer l'url /game (sans le new), le traitement ressemblera au premier, à la différence que le GameModel ne sera pas créée mais récupérée depuis le bean PartieEnCours

    Et donc, si vous tentez d'accéder à l'url http://localhost:8080/game, vous devriez avoir une erreur, pour fonctionner il faut au préalable avoir déclenché l'url http://localhost:8080/game/new pour avoir initialisé une partie en cours. Vérifier en utilisateur 2 navigateurs web (et donc 2 sessions) que vous ne récupérez pas la partie d'une autre session. Vous pouvez par exemple faire le même test avec ou sans le scope session

  • COMMIT partie en session

  • Ajout d'un jeton dans le tableau.

    • Modifier le template HTML pour pouvoir cliquer dans une colonne du tableau pour ajouter un jeton. Pour faire simple, vous pouvez par exemple ajouter un lien ... sur chaque case du tableau. Mais attention ce qui compte c'est la colonne sur laquelle on clique (le jeton va glisser de haut en bas pour atteindre la place libre la plus basse). Ce lien va déclencher l'url /game/drop/in i étant le numero de la colonne choisie. C'est donc un paramètre passé par l'url cf @PathVariable dans la doc https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html#mvc-ann-requestmapping
    • Ajouter donc une méthode dans le controleur pour répondre à cette nouvelle url A cette étape on peut simplifier en ajoutant systématiquement un pion d'une couleur codé en dur.
  • COMMIT ajouter jeton

  • Définir qui doit jouer. Ajouter dans le gameModel une proprieté indiquant le joueur qui doit jouer. En fonction de cette information les jetons ajoutés correspondront au bon joueur. Ajouter une information dans la page HMTL permettant d'identifier a qui c'est le tour de jouer.

  • COMMIT identifier le tour du joueur

  • A chaque coup joué vérifier si le joueur a gagné. si c'est le cas afficher l'information et stopper le jeu, aucune action ne sera alors autorisée

Pour aller plus loin

  • Utiliser JPA (hibernate) pour stocker l'état de la partie en base de données
  • Pour voir modifier les noms des advsersaires, calculer leurs statistiques
  • Utilisez AJAX pour l'action "ajouter un jeton"
  • Pouvoir jouer avec un advsersaire à distance
  • Créer des comptes utilisateurs avec authentification et sécurité
  • Faire le même exercice en mode client-side-templating avec une techno type Angular...

tp-spring-boot-puissance4's People

Contributors

nirgalz avatar alexandrepetrillo avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.