Version 2020, le but de ce TP est de refaire le projet Todo Tomcat/Servlet/JSP en s’appuyant sur des technologies très modernes du développement web avancé (Spring/Restful/Hibernate/Json/Angular2).
Prérequis logiciels à installer :
NOTE: Installation de Spring Tool Suite
Pour installer plus simplement l’outil Spring Tool Suite™ , téléchargez le et lancer son installation soit en associant les fichiers .java au programme de Java soit via une ligne de commande:
java -jar c:\DEV\spring-tool-suite-4-4.8.1.RELEASE-e4.17.0-win32.win32.x86_64.self-extracting.jar
NOTE: Ajout du « Debugger for Chrome » dans Visual Studio Suite
Visual Studio Code ajouter l’installation de « Debugger for Chrome »
NOTA: Quelques copies d’écrans sont de la version Sprint Tool Suite 3 mais la version 4 est très similaire.
Etape 1/ utilisation de Spring Initializr
Allez sur https://start.spring.io/ pour fabriquer le fichier de configuration des jars compatibles pour réaliser nos actions. Les dépendances suivantes sont nécessaires :
- Spring Web: inclus les composants MVC de Spring pour le Web et un serveur Tomcat
- Mysql Driver: inclus le drivers JDBC pour la liaison de Spring avec l’outil de base de données Mysql
- Spring Data JPA: inclus l’utilisation d’Hibernate pour la persistance des données
Il faut utiliser la version SNAPSHOT 2.3.6 (cette copie d’écran date de l’année dernière):
Télécharger le projet au format zip et le placer (en le dezippant et en évitant de faire un dossier C:\DEV\todo\todo\ mais bien un dossier c:\DEV\todo\ ) dans un dossier workspace par exemple c:\DEV\workspace-spring\.
Pour installer plus simplement l’outil Spring Tool Suite™ , téléchargez le et lancer son installation soit en associant les fichiers .java au programme de Java soit via une ligne de commande:
java -jar c:\DEV\spring\spring-tool-suite-4-4.7.1.RELEASE-e4.16.0-win32.win32.x86_64.self-extracting.jar
Importer le projet dans l’outil Spring Tool Suite™ avec une version d’eclipse spécialement configuré pour Spring.
Importer le projet trouvé dans le workspace:
Puis ouvrir le projet pour ajouter les réglages dans le fichier application.properties (ce fichier se trouve dans src/main/ressources ):
Ajouter ce contenu au fichier applications.properties (si vous utilisez Mysql sans installation attention de modifier le port 3306 par le port valide de cette installation):
# ===============================
# DATABASE
# ===============================
#spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/todo?zeroDateTimeBehavior=CONVERT_TO_NULL&serverTimezone=UTC
spring.datasource.username=todo
spring.datasource.password=todo
# ===============================
# JPA / HIBERNATE
# ===============================
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
spring.jpa.properties.hibernate.current_session_context_class=org.springframework.orm.hibernate5.SpringSessionContext
logging.level.org.hibernate.SQL=DEBUG
logging.level.org.hibernate.type=TRACE
On peut noter que les 2 dernières lignes sur le logging permettra d’afficher les requêtes SQL avec les valeurs complètes:
org.hibernate.SQL: insert into Todo (actif, texte) values (?, ?)
Hibernate: insert into Todo (actif, texte) values (?, ?)
o.h.type.descriptor.sql.BasicBinder : binding parameter [1] as [BOOLEAN] - [false]
o.h.type.descriptor.sql.BasicBinder : binding parameter [2] as [VARCHAR] - [todo-8]
Etape 2/ Utilisation de Maven
Il y a un bug majeur dans la version utilisé par Spring de sunfire. Il faut donc modifier le fichier pom.xml pour ajouter une version plus ancienne de sunfire:
dans le tag <build><plugins>, il faut ajouter ce code de <plugin> comme indiqué:
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.5</version>
<configuration>
<skipTests>false</skipTests>
<testFailureIgnore>true</testFailureIgnore>
<forkMode>once</forkMode>
</configuration>
</plugin>
Cela permet d’éviter le bug suivant avec l’intégration problématique de la version sunfire 2.22 qui n’arrive pas à récupérer les informations de sa fin d’exécution (de ce que j’ai compris)
Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.22.2:test
Pour les détails sur ce bug, vous pouvez consulter cette page: https://maven.apache.org/surefire/maven-surefire-plugin/examples/shutdown.html
Un fois le projet est importé, il faut lancer l’exécution sur le projet Maven click droit > Run As > Maven install :
Mais normalement vous pouvez avoir une erreur de configuration du JDK dans la console:
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project todo: Compilation failure
[ERROR] No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
Il faut faire l’ajout du JDK pour le projet, clic droit sur le Projet > Build Path > Configure Build Path >
Puis Onglet Library : choisir le JRE System puis bouton « Edit … »
Puis dans la nouvelle fenêtre choisir « Installed JRE »
Dans la nouvelle fenêtre faire « Add… », dans la nouvelle fenêtre faire « Standard VM » puis « Next » et indiquer le chemin du JDK sur votre ordinateur dans le champ « JRE Home » puis si le JDK indiqué est valide alors le bouton « Finish » ramène à la fenêtre précédente…
Nota: la version que des copies d’écrans est parfois un Java 8 mais pour ce TP je recommande un Java 15.
Validez le JDK installé par défaut en cochant la case à gauche comme sur cette copie d’écran:
Fermer les fenêtres avec « Apply and close » puis vérifier que le « bon » JDK est indiqué sur cette dernière fenêtre avant de faire « Finish »:
Normalement le « Maven install » doit indiquer que tout est opération sans rencontrer d’erreur:
[INFO] BUILD SUCCESS
Pour démarrer le programme spring, il suffit d’ouvrir la classe TodoApplication qui contient la méthode de démarrage du projet et de faire clic droit Menu Debug As > Java Application :
public static void main(String[] args) {
SpringApplication.run(TodoApplication.class, args);
}
A la différence des projets précédents, Tomcat est inclus dans le projet Spring ce qui nous permet de démarrer le programme SpringApplication avec le serveur web. Si vous avez regarder le site start.spring.io en détail, vous avez noter qu’il est possible de déclarer un projet de type war qui dans ce cas peut être inclus dans un serveur Tomcat existant.
Par ailleurs, pourquoi faire un Debug As au lieu d’un Run As ? Via la fenêtre de Debug (cf copie d’écran ci-dessous), nous avons accès à un menu pour arréter le serveur et le relancer (Terminate ou Termiante and Relanuch) ce qui nous permet d’éviter que le serveur Tomcat ne reste en mémoire sur l’ordinateur bloquant le port 8080.
Le redémarrage du serveur est grandement simplifié en gérant son fonctionnement depuis Eclipse (Spring Tool Suite).
Vous pouvez constater le bon fonctionnement du serveur avec votre navigateur chrome en ouvrant l’URL http://127.0.0.1:8080/
Si vous avez un message d’erreur qui indique un problème d’accès à la base de données. Cela sera réglé par la création ensuite d’un utilisateur de base de données, en étape 3.
java.sql.SQLException: Access denied for user 'todo'@'localhost' (using password: YES)
Etape 3/ Fabrication d’une classe Todo entity et configuration BD
Faire une classe Todo dans le projet en ajoutant les getter et setter, constructor par défaut, toString, equals et hashcode (voir le Menu Source pour tout générer automatiquement):
package fr.ema.lgi2p.m2.todo;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class Todo {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Long id;
private String texte;
private Boolean actif;
}
On notera la double annotation @Id et @GeneratedValue qui sous-traite la génération de l’ID à la base de données Mysql.
ATTENTION: si vous avez l’erreur suivante dans la console, c’est parce que votre Pojo Entity Todo n’a pas de constructeur par défaut:
Exception in thread "main" org.hibernate.InstantiationException: No default constructor for entity: com.web_dev_TP1.Web_dev_TP1.Todo
En fait, la couche de persistance JPA/Hibernate a besoin de savoir comment construire votre entité. Cette couche va commencer par créer une instance de Todo et appeler les Getter/Setter pour fabriquer l’instance ensuite. Donc il lui faut un constructeur par défaut…
Maintenant on doit créer une base de données avec un utilisateur de BD pour ce projet, dans mysql avec phpmyadmin, faite la création d’un utilisateur/MDP ayant tout les droits sur une base de données. Dans mon exemple, ces 2 valeurs seront todo.
On peut noter que dans l’onglet « Compte utilisateurs » on peut ajouter un compte utilisateur et une base de données portant le même nom en cochant comme ci-dessous » Créer une base de données portant son nom et donner à cet utilisateur tous les privileges sur cette base »:
NOTA: dans le cas d’une utilisation de Mysql sans installation, il faut lancer en ligne de commande l’utilitaire mysql :
c:\DEV\mysql-5.7.17-winx64\bin\mysql.exe --port=55555 -u root -p
puis entrer ces commandes SQL pour créer un utilisateur todo (avec un mot de passe todo) avec une base de donnée todo:
CREATE DATABASE todo;
CREATE USER 'todo'@'localhost' IDENTIFIED WITH mysql_native_password BY 'todo';
GRANT all on todo.* TO 'todo'@'localhost';
flush privileges;
NOTA: En cas d’erreur suivante:
The server time zone value 'Paris, Madrid' is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone configuration property) to use a more specifc time zone value if you want to utilize time zone support.
Cela vient d’une veille configuration de mon serveur mysql qui a une TimeZone double, pour corriger, soit il faut changer le réglage dans le fichier de configuration de Mysql mais j’ai trouvé plus simple en forçant dans la connexion JDBC la TimeZone:
spring.datasource.url=jdbc:mysql://localhost:3306/todo?zeroDateTimeBehavior=CONVERT_TO_NULL&serverTimezone=UTC
Une dernière exécution du projet Maven > Debug > Maven install puis il faut exécuter la classe principale TodoApplication via clic droit Run > Java Application et accéder au service via un navigateur en allant sur http://127.0.0.1:8080/, par contre l’affichage est la page d’erreur générique « Whitelabel Error Page » que l’on pourra surcharger plus tard.
Il faut ajouter la dépendance de threetenbp dans le fichier pom.xml dans le bloc de tag <dependencies> , cette bibliothèque gère la conversion de date dans des formats compatibles avec Mysql :
<dependency>
<groupId>org.threeten</groupId>
<artifactId>threetenbp</artifactId>
<version>1.3.3</version>
</dependency>
Vous pouvez vérifier que la table todo dans la base de données a été créée dans la base de données soit via phpMyAdmin soit via la commande desc <base de données>.<table>
desc todo.todo;
+-------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+-------+--------------+------+-----+---------+----------------+
| id | bigint(20) | NO | PRI | NULL | auto_increment |
| actif | bit(1) | YES | | NULL | |
| texte | varchar(255) | YES | | NULL | |
+-------+--------------+------+-----+---------+----------------+
3 rows in set (0.00 sec)
Etape 4/ Fabrication d’une classe Controleur RESTful
Créer une nouvelle Classe TodoControleur:
Avec ce code d’un TodoControleur, nous avont une méthode accessible via cette URL en méthode GET sur l’URL /todos:
package fr.ema.lgi2p.m2.todo;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class TodoControleur {
@RequestMapping(value="/todos", method=RequestMethod.GET)
public String listeTodos() {
return "{todos:[]}";
}
}
Testé l’appel via l’URL : http://127.0.0.1:8080/todos
La réponse est un morceau de json que l’on a bien sur compléter plus tard pour retourner tous les todos sous la forme suivante:
{"todos":[
{"id":1,"texte":"todo-1","actif": false}
,{"id":2,"texte":"todo-1","actif": false}
]}
On peut voir que par rapport à un Controleur de type Servlet appelé soit par une méthode GET ou POST, nous pouvons spécialiser des URLs et des méthodes plus simplement (les autres méthodes de REST que GET & POST peuvent être aussi utilisées : « Relation entre URI et méthodes HTTP »)
Nous pouvons maintenant ajouter une méthode pour créer un todo qui aura comme texte un identifiant passé en paramètre {id}
@RequestMapping(value = "/todo/{id}", method = RequestMethod.GET)
public Todo getTodo(@PathVariable int id) {
Todo todo = new Todo( "todo-" +id , false );
return todo;
}
Appelons l’URL via : http://127.0.0.1:8080/todo/100, regardez dans la base de données le nouvel élément ajouté. Bien sur, on peut ajouter de multiples paramètres
On peut noter que la conversion en JSON de l’instance est réalisé automatiquement par Spring.
Etape 5/ Utilisation d’Hibernate au lieu de JPA pour voir un peu de code
Par défaut Spring utilise une couche de persistance appelée la couche JPA générique. Mais en utilisant Hiberante, nous allons pouvoir voir l’enchainement des opérations qui sont faites par cette couche de manière plus visible. Pour activer Hibernate, nous avons à modifier en étape 1 le fichier application.properties se trouvant dans le dossier src/main/ressources
# ===============================
# DATABASE
# ===============================
#spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/todo?zeroDateTimeBehavior=CONVERT_TO_NULL&serverTimezone=UTC
spring.datasource.username=todo
spring.datasource.password=todo
# ===============================
# JPA / HIBERNATE
# ===============================
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
spring.jpa.properties.hibernate.current_session_context_class=org.springframework.orm.hibernate5.SpringSessionContext
logging.level.org.hibernate.SQL=DEBUG
logging.level.org.hibernate.type=TRACE
Voici la nouvelle version de la classe TodoApplication:
package fr.ema.lgi2p.m2.todo;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
import org.springframework.boot.autoconfigure.jdbc.DataSourceTransactionManagerAutoConfiguration;
import org.springframework.boot.autoconfigure.orm.jpa.HibernateJpaAutoConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.core.env.Environment;
import org.springframework.jdbc.datasource.DriverManagerDataSource;
import org.springframework.orm.hibernate5.HibernateTransactionManager;
import org.springframework.orm.hibernate5.LocalSessionFactoryBean;
import java.util.Properties;
import javax.sql.DataSource;
@SpringBootApplication
@EnableAutoConfiguration(exclude = {
DataSourceAutoConfiguration.class,
DataSourceTransactionManagerAutoConfiguration.class,
HibernateJpaAutoConfiguration.class })
public class TodoApplication {
@Autowired
private Environment env;
public static void main(String[] args) {
SpringApplication.run(TodoApplication.class, args);
}
@Bean(name = "dataSource")
public DataSource getDataSource() {
DriverManagerDataSource dataSource = new DriverManagerDataSource();
dataSource.setDriverClassName(env.getProperty("spring.datasource.driver-class-name"));
dataSource.setUrl(env.getProperty("spring.datasource.url"));
dataSource.setUsername(env.getProperty("spring.datasource.username"));
dataSource.setPassword(env.getProperty("spring.datasource.password"));
return dataSource;
}
@Autowired
@Bean(name = "sessionFactory")
public SessionFactory getSessionFactory(DataSource dataSource) throws Exception {
Properties properties = new Properties();
properties.put("hibernate.dialect", env.getProperty("spring.jpa.properties.hibernate.dialect"));
properties.put("hibernate.hbm2ddl.auto", "update");
properties.put("hibernate.show_sql", env.getProperty("spring.jpa.show-sql"));
properties.put("current_session_context_class",
env.getProperty("spring.jpa.properties.hibernate.current_session_context_class"));
LocalSessionFactoryBean factoryBean = new LocalSessionFactoryBean();
factoryBean.setPackagesToScan(new String[] { "" });
factoryBean.setDataSource(dataSource);
factoryBean.setHibernateProperties(properties);
factoryBean.afterPropertiesSet();
SessionFactory sf = factoryBean.getObject();
System.out.println("## getSessionFactory: " + sf);
return sf;
}
@Autowired
@Bean(name = "transactionManager")
public HibernateTransactionManager getTransactionManager(SessionFactory sessionFactory) {
HibernateTransactionManager transactionManager = new HibernateTransactionManager(sessionFactory);
return transactionManager;
}
}
Cette nouvelle version permet de déconnecter les méthodes classiques du JPA pour appeler une nouvelle classe TodoDao qui va assure les opérations classiques de persistence:
package fr.ema.lgi2p.m2.todo;
import java.util.List;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.query.Query;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;
@Repository
@Transactional
public class TodoDao {
@Autowired
private SessionFactory sessionFactory;
public List<Todo> listTodo() {
Session session = this.sessionFactory.getCurrentSession();
Query<Todo> query = session.createQuery("From Todo", Todo.class);
return query.getResultList();
}
public Todo newTodo(Todo newTodo) {
Session session = this.sessionFactory.getCurrentSession();
session.save(newTodo);
return newTodo;
}
}
C’est cette classe TodoDao qui nous permet de vérifier/controler/modifier le fonctionnement classique et automatique de la couche de JPA.
Modification de la classe TodoControleur pour utiliser la classe TodoDao:
@Autowired
private TodoDao todoDao;
@RequestMapping(value = "/todo/{id}", method = RequestMethod.GET)
public Todo getTodo(@PathVariable int id) {
Todo todo = new Todo("todo-" + id, false);
todoDao.newTodo(todo);
return todo;
}
Maintenant l’appel à l’URL suivante : http://127.0.0.1:8080/todo/100 fabrique un nouveau todo et le fait persister. Lancer une second fois en modifiant que la propriété actif du Todo soit true au lieu de false.
Regarder le résultat dans la base de données todo avec l’autoincrément de l’ID:
select * from todo.todo;
+----+-------+----------+
| id | actif | texte |
+----+-------+----------+
| 1 | | todo-100 |
| 2 | ☺ | todo-100 |
+----+-------+----------+
2 rows in set (0.00 sec)
La partie C du CRUD fonctionne maintenant, vous pouvez réaliser les autres opérations sur le CRUD dans le backoffice notamment en utilisation la méthode listTodo dans la classe TodoDao. je vous laisse la main pour rédiger les autres méthodes et l’interfaçage entre Controleur et Dao avec Hibernate.
Etape 6/ Static content pour Spring boot
Création (s’il n’existe pas) d’un dossier src/main/ressources/static pour le contenu static du service qui va contenir les développements en AngularJs. Le contenu static sera par exemple un fichier html, des fichiers css et images dans un premier temps.
L’objectif sera ensuite d’y placer du code html/css/javascript généré par un framework Javascript tel que /jquery-jquery-UI, Vue.js, React.js, Angulars, etc.
Pour afficher une page html, il faut créer une classe IndexController qui va envoyé le contenu de index.html :
package fr.ema.lgi2p.m2.todo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IndexController {
@RequestMapping("/")
public String welcome() {
return "index.html";
}
}
Puis avec la création d’un nouveau dossier src/main/ressources/static/img, pour y placer des images, il faut ajouter le code ci-dessous à la classe TodoApplication pour autoriser le contenu statique dans ce dossier:
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/img/**").addResourceLocations("classpath:/img/");
}
Il est possible d’ajouter des dossiers additionnels pour le reste des ressources comme du CSS.
Maintenant nous avons donc la possibilité d’ajouter du contenu statique dans le dossier src/main/ressources/static/ et ce contenu va provenir d’un développement avec Angular2 dans NodeJS.
Tester quand même la partie Spring static que tout fonctionne, c’est la partie serveur back qui doit être solide avant d’attaquer le frontend.
Etape 7/ Angular2 avec NodeJS
Pour le développement en javascript, le moteur de référence est le Javascript V8 de Google. Je vous recommande la lecture de cette bande dessiné qui explique les choix de Google dans la création de Chrome et particulièrement la partie sur le moteur Javascript V8 (https://www.google.com/googlebooks/chrome/small_00.html). Pour tout développeur WEB, cela donne des indications très utiles qu’il faut bien sur lire avec du recul. Par exemple quand un membre de Google indique « We are using precise garbage collection », il faut aussi comprendre que cela se fait grâce à une consommation de mémoire importante pour conserver les références sur les objets…
Installation de NodeJS 14 et ouvrir la ligne de commande dans un dossier dédié Workspace par exemple en créant ce dossier C:\DEV\workspace-nodejs.
NodeJs est utilisé comme serveur web de debug pour le code développé en Javascript avec le framework AngularJS qui utilise le langage de développement TypeScript. Mais au final la génération finale du projet est un ensemble de code Html/Css/Javascript qui sera embarqué comme contenu statique dans notre application Spring.
En premier lieu, nous allons utiliser ce dossier dans Visual Sutdio Code:
Et ajouter ensuite la fenêtre de terminal pour lancer les commandes de nodejs et d’angularjs:
Nous pourrons donc entrer les commandes directement dans ce terminal. Pour installer le client angular, il faut donc lancer cette commande:
npm install -g @angular/cli
Update npm on ne sait jamais (et update de nodejs peut être aussi?)
npm i npm
Maintenant nous allons créer enfin un projet todo pour angularjs.
Création du projet todo dans un dossier d’un workspace dédié aux projet node-js/angularjs
ng new todo
Répondre « yes » à la question « Would you line toi add Angular routing » et répondre CSS à la question « Which stylesheet format would you like to use (use arrow keys) » en appuyant sur la touche Entrée (oui c’est un menu pour cette option).
NOTA: je vous recommande à terme de tester les framework autour de CSS comme le SASS https://sass-lang.com/guide qui ajoute un système de variable au CSS mais ceci est une autre histoire…
La création du projet se fait par l’installation des différents packages dans le dossier de développement: C:\DEV\workspace-nodejs/todo/.
Il est à noter encore une fois que l’on compilera dans le dossier src/main/ressources/statics/ l’ensemble du projet une fois sa mise au point car l’appel d’un code installé dans NodeJS sur l’URL http://127.0.0.1:4200/ qui lancerait des commandes RESTfull sur des URLs de type http://127.0.0.1:8080/ serait bloquées. Nous verrons en debug comment contourner ce problème.
Nous avons 2 serveurs Web, NodeJS sur le port 4200 et Spring/Tomcat sur le 8080 chacun avec ses avantages et ses contraintes.Pour plus d’informations, vous pouvez consulter les sites traitant du « Cross-origin resource sharing » par exemple https://developer.mozilla.org/fr/docs/Web/HTTP/CORS
Entrer dans le dossier todo avec la commande cd (Change Directory) pour faire les manipulation dans le projet todo nouvellement créé.
cd todo
Puis pour voir l’application avec le serveur NodeJs, il faut entrer cette commande:
ng serve --sourceMap=true
Et une fois la conversion de l’application AngulArJs écrite en TypeScript faite en fichier Html/Css/Javascript, on peut via l’URL http://127.0.0.1:4200/ voir le résultat:
Etape 8/ Angular et TypeScript
TypeScript est un sur-langage de Javascript (wikipedia TypeScript), l’idée est d’écrire un code en langage TypeScript qui va être converti en Javascript avec des vérifications qui permettent d’éviter les erreurs classiques de javascript comme le « Object doesn’t support property »:
var todo = {"id":1,"texte":"lait","actif":false}
console.log( todo.Id );
NOTA: l’année précédent, vous avez peut être vu une démonstration d’AngularJS qui est une ancienne version d’AngularJS (ou Angular 1) utilisant le Javascript et non pas le TypeScript.
Avec la complexité des codes en constante augmentation, Javascript doit être renforcé de tests et de controle pour construire une architecture standardisé de type MVC côté Front-End vu que Spring propose les mêmes mécanisme côté Back-End.
Si on reprends l’application todo, on peut se concentrer pour la faire évoluer sur les 3 fichiers suivants dans le dossier src/app/ :
app.component.ts— Le code du composant de base en TypeScript.app.component.html— La partie vue en HTML du composant de base en HTML.app.component.css— La feuille de styles du composant de base en CSS.
Le composant proposé par défaut par AngularJs est trop complexe pour notre application Todo. Remplaçons le code de app.component.html par ce code:
<div id="title">
<h1>{{title}}</h1>
</div>
La modification de ce fichier fait automatiquement rechargé la page de votre navigateur car l’applicaiton ng serve --sourceMap=true fonctionne toujours sur votre ordinateur (à moins que vous n’ayez fermé ce programme et/ou le navigateur). Nous évitons ainsi tout ce qui est mécanisme de refresh du navigateur, tout est automatisé.
On peut ensuite modifier le fichier app.component.css pour y ajouter le centrer d’un tag h1 inclus dans un div ayant l’ID title:
#title > h1 {
text-align: center;
}
L’étape suivante est de modifier le fichier app.component.ts qui contient la classe gérant le composant. Au début le composant n’inclus qu’une seule propriété par défaut title:
export class AppComponent {
title = 'todo';
}
Nous pouvons ajouter une propriété lesTodos contenant une liste de valeurs qui sera initialisé par l’appel de la méthode ngOnInit qui se déclenche à la fabrication du composant (ne pas oublier de modifier la première ligne aussi avec OnInit) :
import { Component, OnInit } from '@angular/core';
export interface Todo{
id: number;
texte: string;
actif: boolean;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
lesTodos = [];
// si vous avez une erreur de type remplacer la ligne ci-dessus par
// lesTodos: Array<Todo> = [];
title = 'todo';
ngOnInit(): void {
this.lesTodos=[{"id":1,"texte":"lait","actif":false},{"id":2,"texte":"beurre","actif":false}];
}
}
Côté application.html modifions pour afficher ce tableau JSON:
<ul>
<li *ngFor="let todo of lesTodos">{{todo.texte}}</li>
</ul>
Attention, ce n’est pas la « bonne » solution, il faut passer ensuite dans une structure avec Composant dans Angular que l’on verra plus loin. Tout mettre dans les fichiers applications n’est ici que dans un but d’apprentissage par étape.
Etape 9/ Intégration AngularJs avec Spring
La création des fichiers finaux dans le dossier src/ressources/static/ va permettre d’intégrer les codes ensembles et de faire un appel à l’URL http://127.0.0.1/todos/ pour obtenir la liste des todos.
Ouvrez un nouveau terminal via la même opération que dans l’étape 7 car pour mémoire le premier terminal est utilisé par le programme ng serve.
Créer les fichiers finaux d’angularjs dans le dossier du projet spring boot et plus précisement dans le dossier ressources/static/:
ng build todo --prod --outputPath=C:\DEV\workspace-spring\todo\src\main\resources\static
Vous pouvez constater que l’ensemble des fichiers du projet Angular on été réduit en une collection de quelques fichiers Javascript, un fichier Html et un fichier CSS dans un format compacté et simplifié.
Le déploiement ensuite classiquement du projet spring nous permet de tester la solution dans Spring/Tomcat et de constater via les outils de développement Web du navigateur que l’on a juste oublié de créer la ressource favicon.ico (la seule erreur 404 dans cet onglet):
L’intégration est donc faite entre un Front-End développé avec le Framework Angular et le Back-End développé en Spring. Ce qui est important est que l’on peut remplacer des briques logicielles de cette architecture, par exemple remplacé le Front-End par le Framework React.js ou Vues.js ou un développement en iOs/Android et le Back-End peut être lui en technology Python, PHP, NodeJS, etc.
Il faut maintenant charger la liste des todos depuis l’URL http://127.0.0.1:8080/todos mais attention Angular est très sensible au formatage du fichier JSON provenant d’un serveur:
- Evitez les objets contenant pour faire directement un tableau:
- Oui: [{« id »:1, »texte »: »todo-1″, »actif »:false},{« id »:2, »texte »: »todo-1″, »actif »:false}]
- Non: {todos:[{« id »:1, »texte »: »todo-1″, »actif »:false},{« id »:2, »texte »: »todo-1″, »actif »:false}]}
- Simple quote n’est pas autorisé dans le formatage JSON:
- Oui: [{« id »:1, »texte »: »todo-1″, »actif »:false},{« id »:2, »texte »: »todo-1″, »actif »:false}]
- Non: [{‘id’:1,’texte’:’todo-1′,’actif’:false},{‘id’:2,’texte’:’todo-1′,’actif’:false}]
- Element String non encadré de quote:
- Oui: [{« id »:1, »texte »: »todo-1″, »actif »:false},{« id »:2, »texte »: »todo-1″, »actif »:false}]
- Non: [{‘id’:1,’texte’:todo-1,’actif’:false},{id:2,’texte’:’todo-1′,’actif’:false}]
On peut exploiter par exemple la nouvelle fonctionnalité des block texte pour simplifier la fabrication de fichier JSON (attention cela ne fonctionne pas encore c’est trop tôt voir le contournement plus bas):
public String toJson() {
return """
{"id":$id,
"texte":"$texte",
"actif":$actif}
"""
.formatted("$id", this.id )
.formatted("$texte",this.texte)
.formatted("actif",this.actif);
}
La nouvelle version de Java 15 inclus ces structures de block texte pour permettre de fabriquer du contenu plus simplement que les anciennes concaténations assez peu lisible:
return "{\"id\":" + this.id + ",\"texte\":\"" + this.texte+ "\",\"actif\":" + this.actif.toString() +"}";
A voir http://blog.codefx.org/java/text-blocks/
NOTA: contournement de la méthode formatted qui est trop récente. En fait on va créer un string ( avec un objet TextBlock il y a un conflit cette feature est trop récente pour Spring) puis appeler la méthode static String.format qui fonctionne comme la fonction du langage C printf historique.
String returnString = "{\"id\":%d,\"texte\":\"%s\",\"actif\":%s}";
returnString = String.format(returnString, this.id, this.texte, this.actif);
Le remplacement des éléments %d (pour un nombre) ,%s (pour un string) se fait dans l’ordre d’apparition. Ce bout de code est en attente de solution élégante de chercher et remplacer dans les TextBlock à venir ou une autre solution (json-simple, Gson, etc.)
Plus élégant, on peut alors exploiter aussi les Stream appellant la méthode toJson sur chaque élément et en ajoutant un [ au début , un ] à la fin et des virgules entre les éléments:
lesTodos.stream().map(todo -> {return todo.toJson()}).collect(Collectors.joining(",", "[", "]"));
Il faut maintenant récupérer dans Angular la liste des Todos au lieu de l’avoir en dur dans le code. Alors l’ancienne version utilisait le module HttpClient qui a évolué en un nouveau module HttpClientModule. Donc attention, il peut y avoir confusion car il y a eu évolution de ce composant.
En premier lieu, ajoutons dans le fichier app.module.ts l’importaiton suivante:
import { HttpClientModule } from '@angular/common/http';
Et dans le même fichier, il faut l’ajouter au tableau des NgModule:
@NgModule({
Imports: [
HttpClientModule,
...
],...
})
NOTA: un problème avec ce nouveau module m’a obligé à lancer cette commande suivante et à relancer le serveur NodeJS:
npm cache verify
Il faut ajouter l’importation suivante en début de fichier app.component.ts:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
Cet importation nous permet de fabriquer une instance d’HttpClient dans le composant AppComponent via l’appel à la méthode constructor qui permet de fabriquer une propriété pour AppComponent qui est de nature privé, c’est l’équivalent en Java du constructeur. Je vous renvoie à cet article qui explique la notion d’initialisation et de classe entre Angular et TypeScript (http://pierreterrat.com/angular-ngoninit-et-constructor/).
Une fois que l’on dispose d’un client HttpClient, on peut l’utiliser pour faire une requête HTTP RESTFull, en première version avec création d’une constante temporaire:
export class AppComponent implements OnInit {
lesTodos = [];
title = 'todo';
constructor(private http: HttpClient) {
const desTodos:Observable<[]> = this.http.get<[]>('http://127.0.0.1:8080/todos/');
desTodos.subscribe(desTodos => {
this.lesTodos = desTodos;
console.log(this.lesTodos);
});
}
Vous pouvez maintenant faire le déploiement de cette version du frontend dans Spring en redéployons la dans le dossier static:
ng build todo --prod --outputPath=C:\DEV\workspace-spring\todo\src\main\resources\static
Mais pour tester, il faut outrepasser la protection la sécurité du CORS que l’on voit plus bas au chapitre Debug.
La liaison est faite entre le serveur Spring et le Fron-End Angular via cette opération.
Nous pouvons améliorer la récupération des informations via l’appel GET en spécifiant une structure de données via un interface dans le fichier app.component.ts en ajoutant l’export en tête du fichier (après les imports):
export interface Todo {
id: number;
texte: string;
actif: boolean;
}
Conversion de l’appel GET, en indiquant la nature des données Todo[]:
const desTodos:Observable<Todo[]> = this.http.get<Todo[]>('http://127.0.0.1:8080/todos/');
Et en seconde version, on peut intégrer l’opération de conversion d’une instance de Observable<Todo[]> vers la propriété this.lesTodos en tableau de valeur:
this.http.get<Todo[]>('http://127.0.0.1:8080/todos/').subscribe(lesTodosJson => this.lesTodos = lesTodosJson);
Etape 10/ Debug et utilisation d’angular avec l’IDE ou sans IDE
Le débug du développement avec Angular suppose l’installation notamment d’un navigateur démarré avec des options. Personllement, j’utilise un Chromium (version opensource de Chrome) pour faire les opérations, je le lance dans le terminal avec ces réglages:
C:\Users\pierre.jean\AppData\Local\Chromium\Application\chrome.exe --disable-web-security --disable-gpu --user-data-dir=c:\DEV\worskpace-nodejs --auto-open-devtools-for-tabs --remote-debugging-port=9222 -incognito http://127.0.0.1:4200/
- L’option –disable-web-security me permet d’outrepasser la sécurité du CORS et je peux donc débugger sur le serveur NodeJS (port 4200) qui appele le serveur Spring (port 8080). Il y a d’autres solutions possible pour contourner le CORS mais je trouve celle-ci simple d’installation
- L’option –disable-gpu me permet d’éviter d’utiliser le rendu du GPU pour avoir le fonctionnement le plus simplifié possible de Chromium
- –user-data-dir permet de créer un profil utilisateur spécifique pour le développement sans réglages venant d’une autre session de Chromium
- –auto-open-devtools-for-tabs ouvre les Web Developper Tools par défaut
- –remote-debugging-port ouvre un port de communication pour le débuggage depuis Visual Studio Code pour que les points d’arrêts placé dans l’IDE soit arrété dans Chromium
- -incognito est l’option navigation privé de Chromium
- http://127.0.0.1:4200/ est l’URL de NodeJs à remplacer par http://127.0.0.1:8080/ si on souhaite débugger sur Spring
Le démarrage de ng serve avec sourceMap permet de générer des fichiers qui font la correspondance entre le code Javascript et le code TypeScript pour le débuggage.
ng serve --sourceMap=true
L’utilisation des points d’arrêt dans le Visual Studio Code se fait en modifiant le fichier launch.json via le menu Executer > Ouvrir les configurations à modifier pour « attacher » le debugger de Visual Sutdio au Chromium démarré avec le port 9222 pour l’échange des points d’arrêt:
{
// Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
// Pointez pour afficher la description des attributs existants.
// Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Chromium Launch",
"url": "http://127.0.0.1:4200/",
"port":9222,
"sourceMaps": true,
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///./*":"${workspaceRoot}\\*"
}
}
]
}
Je peux donc mettre un point d’arrêt dans Visual Studio Code, « Executer > Démarrer le debogage » qui va se lier avec le Chromium démarré précédemment.
Une autre solution pratique aussi pour placer un point d’arrêt d’utiliser la commande « debugger; » dans une ligne du programme TypeScript pour permettre au programme de s’arrêter.
Exemple de point d’arrêt placé dans Chromium que l’on retrouve dans Visual Studio Code, notez la barre d’outil dans Visual Studio Code qui permet de faire les opérations classiques de débuggage, le dernier bouton en rouge permet de détacher le debugger de Visual Studio Code de Chromium:
Le debuggage depuis Visual Studio Code ne fonctionne pas toujours, je passe donc systématiquement par le debugger de Chromium et pour trouver le bon fichier, j’utilise le fameux mot clef debugger; .
Voici un exemple, de l’éxécution sur le Spring avec le code Angular intégré, l’appel à la requête todos/ qui retourne un fichier JSON et affiche dans la console du navigateur le retour d’information.
NOTA sur le débugage:
Je vous laisse avec ce petit problème avec les fonctions d’asynchrones pour le debug:
const desTodos:Observable<Todo[]> = this.http.get<Todo[]>('http://127.0.0.1:8080/todos/');
desTodos.subscribe(desTodos => {
this.lesTodos = desTodos;
console.log( "Appel Asynchrone:" + this.lesTodos);
});
console.log("C'est vide: "+this.lesTodos);
En fait la dernière ligne avec le message « C’est vide » ne va pas contenir les todos car la requête HTTP RESTFull n’est pas terminée, c’est la ligne contenant « Appel Asynchrone » qui elle sera appelé plus tard quand la réponse à la requête HTTP RESTfull sera réalisée.
On peut donc retirer la dernière ligne qui ne sert à rien pour le débugage…
Etape 11/ Création d’un composant pour améliorer le code
La première opération que nous allons faire est de remplacer l’interface simple du Todo en un composant complet d’Angular via la ligne de commande:
ng generate component Todo
Le composant va se composer de 3 nouveaux fichiers classiques en Angular: todo.component.html, todo.component.css et todo.component.ts.
On ne touchera pas vraiment au fichier todo.component.css pour l’instant. Le contenu de todo.component.html va être de cette forme aussi simplifié (n’oublions pas que cela va être placé dans un tag <li></li> d’une liste HTML:
<span>( {{currentTodo.id}} ) -> {{currentTodo.texte}} is {{currentTodo.actif}}</span>
Maintenant le nouveau composant doit recevoir une instance de Todo, que l’on appellera currentTodo de type Todo. Pour cela le composant TodoComponent a une propriété indiqué avec l’annotation @Input. On n’oubliera pas d’ajouter dans l’import la nouvelle annotation Input:
@Input() currentTodo:Todo;
Le code de todo.component.ts :
import { Component, OnInit, Input } from '@angular/core';
export interface Todo {
id: number;
texte: string;
actif: boolean;
}
@Component({
selector: 'app-todo',
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {
@Input() currentTodo:Todo;
constructor() { }
ngOnInit(): void {
}
}
Il est à noter aussi que on définie pour la seconde fois l’interface Todo et que l’on devra bien le factoriser prochainement.
Maintenant, appelons ce nouveau composant dans le fichier app.component.html (j’ai laissé l’ancienne notation en commentaire HTML pour montrer la différence:
<li *ngFor="let todo of lesTodos">
<!-- <span>{{todo.id}}</span> {{todo.texte}} -->
<app-todo [currentTodo]=todo></app-todo>
</li>
La liaison se fait via le @Component et sa propriété selector: ‘app-todo’.
Bien sur maintenant on peut intervenir sur le todo.component.html pour faire le rendu du contenu du currentTodo:
<span id="checkbox_{{currentTodo.id}}"> {{currentTodo.texte}} is {{currentTodo.actif}}</span>
Vous pouvez modifier pour ajouter une classe CSS au span qui sera liéé à actif/non actif:
<span id="checkbox_{{currentTodo.id}}" class="todo_{{currentTodo.actif}}"> {{currentTodo.texte}} </span>
Un peu de CSS dans le fichier todo.component.css pour diférencié actif/non actif:
span.todo_false{
text-decoration: line-through;
}
On pourrait fabriquer ce qui est formatage de type Pipe pour avoir un élément actif ou innactif. je vous renvoie sur ce tutoriel qui expliquera très bien comment cela fonctionne: https://fiyazhasan.me/angular-pipe-for-handling-boolean-types/
Etape 12/Formulaire avec binding des données et envoie des données
Création d’un évènement click sur le span dans le composant todo.component.html
<span (click)="onEdit()" id="checkbox_{{currentTodo.id}}" class="todo_{{currentTodo.actif}}"> {{currentTodo.texte}} </span>
Il faut donc créer la méthode onEdit dans todo.component.ts avec une propriété edit qui gère si le TodoComposant est en mode edition ou non:
export class TodoComponent implements OnInit {
@Input() currentTodo:Todo;
edit:boolean = false;
onEdit(): void {
this.edit = !this.edit;
}
}
On va donc gérer dans le TodoComposant l’affichage soit de l’affichage déjà disponible soit d’un champ de formulaire avec un if à la façon Angular:
<span *ngIf="edit==false" (click)="onEdit()" id="checkbox_{{currentTodo.id}}" class="todo_{{currentTodo.actif}}"> {{currentTodo.texte}} </span>
<span *ngIf="edit==true"
id="checkbox_{{currentTodo.id}}">
<input value="{{currentTodo.texte}}" placeholder="Description"/>
</span>
Sauf que notre tag <input> n’a pas de liaison avec le composant TodoComposant pour reprendre les informations après modification.Nous allons ajouter à l’application le composant FormsModule en ajoutant l’import du formulaire dans app.module.ts:
import { FormsModule } from '@angular/forms';
et plus dans le tableau imports (bien sur s’il y a plusieurs imports dans le tableau ne les retirez pas) :
imports: [
FormsModule,
],
Nous allons faire évoluer le TodoComposant pour lui ajouter une liaison avec le contenu du champ <input> via cet attribut [(ngModel)]= »currentTodo.texte » tout modification du champ de formulaire sera effective sur la propriété currentTodo.texte et vise-versa (du coup plus besoin de l’attribut value ):
<input placeholder="Description"
[(ngModel)]="currentTodo.texte"
(focusout)="onValidation()" autofocus
/>
On notera que l’évènement focusout (perte de focus) permet de détecter la validation par l’utilisateur. Dans le composant TodoComposant, la méthode onValidation() ne fait que désactiver la valeur edition sans gérér la valeur du champs car c’est le binding d’Angular qui fait le travail tout seul :
onValidation(): void {
this.edit = false;
}
Maintenant ajoutons le bouton checkbox et un bouton validé et envoyons sur le serveur la modification:
<input placeholder="Description"
[(ngModel)]="currentTodo.texte"
/>
<input type="checkbox"
[(ngModel)]="currentTodo.actif"
/>
<input type="button" (click)="onValidation" value="Update" />
On retire la validation de la perte de focus du premier champs car sinon on valide avant d’avoir pu modifier le checkbox. J’avoue que la gestion des évènements pour éviter le bouton au bout de la ligne est complexe mais en fait ce code ne fonctionne que trop bien…
En effet, en cliquant sur le bouton Update on va aussi déclenche ensuite l’évènement sur le tag <span> qui repasse en mode édition. Comme dans beaucoup de framework javascript, il faut arréter la propagation de l’évènement click.
Dans todo.component.html:
<input type="button" (click)="onValidation($event)" value="Update" />
Dans todo.component.ts:
onValidation(event): void {
event.stopPropagation();
this.edit = false;
}
L’envoie des données se fait avec des modifications côté Spring pour récupérer des données complexes. En premier lieu je donne la version détaillée où la conversion du fichier JSON en objet est visible pour simplifier le débuggage, ensuite on voit la version intégrée avec Spring.
Côté Spring, deux nouvelles méthodes:
Pour la couche TodoDao :
public Todo updateTodo(Todo newTodo) {
Session session = this.sessionFactory.getCurrentSession();
session.update(newTodo);
return newTodo;
}
Pour la fouche Controleur TodoControleur:
@PostMapping(value = "/updateOneTodo" )
public Todo updateTodo(@RequestBody String todo) {
ObjectMapper mapper = new ObjectMapper();
// Petit bug qui permet de forcer le passage d'un int en long
mapper.configure(DeserializationFeature.USE_LONG_FOR_INTS, true);
try {
Todo newTodo = mapper.readValue(todo, Todo.class);
todoDao.updateTodo( newTodo );
return ( newTodo );
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return (null);
}
Côté Angular (n’oubliez pas d’importer le module http comme pour app.component.ts :
onValidation(event): void {
event.stopPropagation();
this.edit = false;
this.updateTodo();
}
updateTodo():void{
const newTodo:Observable<Todo> = this.http.post<Todo>('http://127.0.0.1:8080/updateOneTodo'
, this.currentTodo );
newTodo.subscribe(newTodo =>{
this.currentTodo = newTodo;
console.log(this.currentTodo);
});
}
L’envoie d’un Todo se fait directement en passant l’objet Javascript qui va être converti en donnée JSON de la forme:
{id: 10, texte: "yaourt", actif: true}
On voit que l’on réalise la conversion de la chaine de caractère depuis le JSON en instance TODO avec le convertisseur JSON de Spring qui s’appelle Jackson.
Attention, il faut activer cette nouvelle option dans le fichier application.properties de Spring pour cause d’incompatibilité entre Angular et Spring sur le format du JSON:
#Jackson JSON parser
spring.jackson.parser.allow-unquoted-field-names=true
Car Jackson attend ceci comme fichier JSON par défaut:
{"id": 10, "texte": "yaourt", "actif": true}
Enfin la version plus simple côté Spring qui réalise la conversion directement:
@PostMapping(value = "/updateTodo")
public Todo updateTodo(@RequestBody Todo todo) {
todoDao.updateTodo(todo);
return todo;
}
L’opération de conversion est réalisé avec Jackson mais je pense comme d’habitude qu’il est utile de pouvoir valider la conversion de JSON avec la première méthode pour gérer des cas plus variés. Côté Angular, la seule modification est dans l’URL de passer de /updateOneTodo en /updateTodo.
Les grandes bases de l’architecture Spring/Angular sont en place, à vous de jouer maintenant pour réaliser toutes les autres fonctionnalités du CRUD.
Pour revenir sur le problème de conversion avec Json, on peut ajouter la bibliothèque Gson à Spring, dans le fichier pom.xml à la fin du tag <dependecies>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.5</version>
</dependency>
</dependencies>
Du coup on peut créer une classe TodoHelper:
import com.google.gson.Gson;
public class TodoHelper {
private static Gson gson = new Gson();
public static String toJsonConverter(Todo todo){
return gson.toJson( todo );
}
}
Et appeler depuis notre Todo ce convertisseur:
public String toJson() {
return TodoHelper.toJsonConverter(this);
}
On pourrait même techniquement retirer Jackson comme serialiser/deserialiser de Json de Spring pour exploiter directement Gson.
spring.http.converters.preferred-json-mapper=gson
C’est une des forces de Java JEE de pouvoir permettre le remplacement d’un composant par un autre pour fabriquer un framework dont la structure peut évoluer doucement pour tirer partie d’une fonctionnalité ou d’une autre. Notre pile logicielle actuelle s’appuie sur Spring+Angular mais on pourrait avoir un remplacement d’un composant ou d’un autre, ou l’ajout de composants additionnels selon le besoin.
