Spring 01 : Démarrage

Dans cette quête, tu vas découvrir le framework Spring.

Tu vas apprendre à générer un squelette de projet web, puis tu vas découvrir comment créer tes premières routes à l'aide du framework.

Allons-y !

Objectifs

• S'initier au fonctionnement de Spring et Spring Boot
• Créer un projet avec Spring Initializr
• Mettre en place tes premières routes

Découvre l'univers de Spring

Un écosystème Java

Spring est un framework permettant de développer des applications Java, notamment orientées vers le web. Plus exactement, il s'agit de tout un écosystème de modules pensés pour aider les développeurs dans leur travail (pour avoir un aperçu de la variété de ces derniers, va faire un tour du côté de la ressource Projects).

Dans cette quête, nous allons manipuler plus spécifiquement Spring Boot. Arrivé quelques années après le projet Spring lui-même -- déjà apprécié dans le monde de la programmation, mais dont la configuration pouvait s'avérer complexe -- Spring Boot a été une véritable révolution. En effet, grâce à lui, il est possible de configurer un projet Java web et de le faire tourner en quelques instants, ce qui permet de se lancer dans le code sans attendre.

Et c'est exactement ce que tu vas faire à la prochaine étape !

Démarre avec Spring Boot

Le monde merveilleux de Spring Initializr

Spring Boot propose plusieurs façons de générer un squelette de projet web utilisable out of the box. Un moyen de le faire est de passer par Spring Initializr : https://start.spring.io.

Crée un nouveau projet avec un group « com.wildcodeschool », ainsi qu'un artefact « myProject » (l'artefact est le nom de ton futur projet ; de plus, group + artefact => le nom du package que Spring Boot va générer pour ton projet par défaut).

Côté dependencies, choisis « web », puis clique sur « Generate ».

Télécharge le zip généré, extrais-le et importe-le dans ton IDE. Dans ton nouveau projet, tu peux voir deux éléments notables : pom.xml à la racine, et MyProjectApplication.java dans le dossier src/main/java/com/wildcodeschool/myProject.

• Le fichier pom.xml est un Project Object Model : il décrit la configuration du projet et contient les dépendances nécessaires à sa construction avec l'outil Maven.

• La classe MyProjectApplication.java est systématiquement créée dans un nouveau projet Spring Boot. Elle constitue le point d'entrée par lequel le programme démarrera lorsqu'il sera lancé (tu peux y jeter un œil, notamment pour voir qu'elle contient la méthode main).

Lance ton application

De base, ton fichier MyProjectApplication.java devrait ressembler à ça :

package com.wildcodeschool.myProject;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MyProjectApplication {

    public static void main(String[] args) {
        SpringApplication.run(MyProjectApplication.class, args);
    }

}

Des imports, une classe avec une méthode main : ce sont des choses que tu as déjà vues. Ce qui est peut-être nouveau pour toi, c'est l'annotation @SpringBootApplication.

Les annotations sont un mécanisme puissant introduit par Java 5. Elles permettent de donner des indications sur des éléments de ton code : les classes, les méthodes, paramètres... Pour le dire avec des mots techniques, les annotations permettent d'ajouter des métadonnées.

Ici, @SpringBootApplication permet notamment -- mais pas que -- à Spring de se configurer automatiquement en fonction des dépendances du projet décrites dans le pom.xml. Cela nous évite déjà pas mal de boulot, et rend l'application tout de suite utilisable.

Place-toi dans le dossier correspondant à ton projet, puis exécute la commande mvn spring-boot:run : cela lancera ton application Spring. Mais bon, à part se lancer, pour l'instant elle ne fait pas grand-chose... Nous allons changer ça.

Ressources statiques

Grâce à ton serveur Spring Boot, tu vas pouvoir accéder en premier lieu des fichiers statiques. Un fichier statique est un document dont le contenu est figé et non généré par du code : par exemple :

• des fichiers css

• des images

• des fichiers html dont les données ne seront pas modifiées en fonction de l'utilisateur

Voici la structure d'un projet Spring Boot :

.
├── HELP.md
├── mvnw
├── mvnw.cmd
├── pom.xml
└── src
    ├── main
    │   ├── java
    │   │   └── com
    │   │       └── wildcodeschool
    │   │           └── myProject
    │   │               └── MyProjectApplication.java
    │   └── resources
    │       └── application.properties
    │       ├── static
    │       └── templates
    └── test
        └── java
            └── com
                └── wildcodeschool
                    └── myProject
                        └── MyProjectApplicationTests.java

Les fichiers statiques seront à déposer dans le dossier static des resources de ton application : le chemin sera /src/main/resources/static.

Dans ce dossier, tu peux y créer un premier fichier index.html avec une structure par défaut, comme tu peux trouver ici.

Si tu ne l'as pas déjà fait, arrête ton serveur wen (avec CTRL+C) et relance-le, toujours avec la commande mvn spring-boot:run.

En ouvrant l'url http://localhost:8080 dans ton navigateur, tu devrais maintenant voir le contenu de la page index.html !

De la même façon, si tu as des images, css ou JavaScript à déposer de façon statique, tu devras les copier dans le dossier static et y accéder de la manière suivante :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
<img alt="Picture sample" src="img/picture.jpg">
<script src="js/script.js"></script>
</body>

</html>

Avec la structure suivante :

.
└── src
    └── main
        └── resources
            ├── application.properties
            ├── static
            │   ├── css
            │   │   └── style.css
            │   ├── img
            │   │   └── picture.jpg
            │   ├── index.html
            │   └── js
            │       └── script.js
            └── templates

Crée ta première route

S'il s'agissait de n'afficher que du contenu statique, on pourrait se passer d'un serveur Spring Boot. L'intérêt va souvent résider dans la génération de contenu dynamique : généré par du code !

Pour cela tu vas avoir besoin d'un contrôleur (oui, le C de MVC).

Dans ton projet, au niveau de ton package principal (ici /src/main/java/com/wildcodeschool/myProject), créé le package controller : par convention, c'est là que tu créera tes contrôleurs.

Créer ensuite une classe MainController avec le contenu suivant :

package com.wildcodeschool.myProject.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class MainController {

    @GetMapping("/greetings")
    @ResponseBody
    public String index() {
        return "Greetings from Spring Boot!";
    }
}

Ces quelques lignes déclarent une méthode annotée avec @GetMapping et @ResponseBody. Nous sommes des devs web, et ce que nous voulons, c'est une appli qui joue le rôle de serveur : lorsqu'un client lui envoie une requête, le serveur lui retourne une réponse. Plus concrètement, lorsque tu rentres une url dans ton navigateur, celui-ci en fait une requête dont il attend une réponse.

Si tu regardes attentivement l'annotation @GetMapping, tu verras qu'elle prend en paramètre -- entre les parenthèses -- une chaîne de caractères : c'est l'url pour laquelle ta méthode va fournir une réponse. On parle de routing, ou aussi de mapping : toutes les requêtes envoyées vers l'url vont être reroutées, mappées vers la méthode annotée et déclencher ton exécution. Finissons l'exemple pour voir ce que ça donne.

Pour que le mapping soit pris en compte, la classe doit avoir l'annotation @Controller :

@Controller
public class MainController {
    // ...
}

Relance l'application avec mvn spring-boot:run, et ouvre maintenant l'url http://localhost:8080/greetings dans ton navigateur : tu devrais voir s'afficher le message "Greetings from Spring Boot!"

Comment c'est possible ? Une petite image pour y voir clair :

Lorsque tu as envoyé une requête au serveur pour l'url http://localhost:8080/greetings -- le serveur local lancé par défaut par ton application Spring, la requête a été transmise à un gros rouage : le Dispatcher Servlet. Son rôle est de chercher, pour le chemin demandé -- dans notre cas le /greetings à la fin de l'url -- si un mapping existe : c'est la flèche 1 sur le schéma.

En cas de réponse positive -- la flèche 2 -- le Dispatcher Servlet exécute la méthode du contrôleur correspondant et enregistre sa réponse : les étapes 3 et 4. Dans un cas "normal", cette réponse est le nom d'une vue (encore un morceau de l'architecture MVC).

Les étapes 5 à 8 montrent la résolution du nom pour obtenir la vue elle-même qui sera retournée au client.

Dans notre cas, ces étapes ont été court-circuitées : l'annotation @ResponseBody sur notre méthode indique que son retour n'est pas le nom d'une vue, mais directement le corps de la réponse à retourner au client. Notre méthode retourne une chaîne de caractères : tu la vois directement affichée dans le navigateur, car c'est la réponse qu'il a obtenue du Dispatcher Servlet. Cette chaîne pourrait même contenir du code HTML :

return "Greetings from <a href='https://spring.io/projects/spring-boot'>Spring Boot!</a>";

Déjà de quoi jouer un peu :)

Challenge

Hello, I'm the Doctor

Tu vas créer quelques routes à l'aide d'un contrôleur :

• crée un projet web avec Spring Initializr
• crée un package controller avec le contrôleur DoctorController
• dans le contrôleur, ajoute le mapping /doctor/1 : la page affiche "William Hartnell"
• dans le contrôleur, ajoute le mapping /doctor/10 : la page affiche "David Tennant"
• dans le contrôleur, ajoute le mapping /doctor/13 : la page affiche "Jodie Whittaker"
• ajoute un fichier statique index.html qui renvoie une liste des urls demandées ci-dessus, sous forme de liens HTML -- pense aux balises <ul> et <li> pour contenir tes balises <a>
• Pousse le contenu de ton projet dans un dépôt GitHub et poste le lien de ton dépôt en guise de solution

Critères de validation

• Le contrôleur contient 3 routes.
• La racine retourne les liens vers toutes les pages.
• Le code est disponible sur GitHub.