xms-ovh-dokuwiki

La première définition de Node.js est : un moteur de javascript, issu du moteur de javascript de chrome.

L'avantage de Node.js est de permettre une exécution coté serveur des scripts javascripts embarqués dans une page web.

Plus précisément : On s'en sert souvent pour éviter aux clients web de construire leur page web de 0 quand ils se connectent : A la place, un serveur node.js joue le role de reverse proxy (de client web vers le gros serveur, et de serveur web pour les clients, à leur 1ere connection) : quand il recoit la requete web index.html, c'est lui qui va essayer de constuire la page web :

1. il demande au serveur web la page index.html
2. une fois recu, il exécute tous les codes javascripts qui vont construire la page web et invoquer des appels aux API REST du serveur.
3. une fois terminé, il rend la page index.html complète au client, et le client web n'aura plus besoin de ses services
4. les prochains appels aux serveurs émis par les clients web seront normalement juste des appels aux API REST du serveur web.

> Avant node.js

    Requete page web ----------> Serveur web <--> Serveur de services REST <-----> base de donnée
    Reponse page web <---------- Serveur web
    

> Avec node.js

    Requete page web ----------> Node.js     <----> Serveur web 
                                 Node.js   exécute le javascript de la page web
    Reponse page web <---------- Node.js     <----> Serveur de services REST <-----> base de donnée

Ensuite, en supposant que la page web soit en angular, on fera en sorte d'éviter d'appeler de nouvelles page web =⇒ les actions utilisateur seront traduites par des appels au serveur de services REST uniquement.

Node.js possède un grand nombre de librairies, ci-dessous, nous verrons l'installation de certaines. NPM est l'outil qui permet de gérer l'installation/la suppression des modules node.js

Pour installer NPM :

1. Suivre les instructions de https://nodejs.org/en/
2. Puis installer la dernière version npm

# npm install -g npm

Ca l'air de ressembler à grunt, un gestionnaire de build qui permet de lancer le packaging, les tests, ou même un faux serveur web sur un port différent (en général 9000), qui sert les fichiers que vous en êtes en train de développer.

L'avantage, c'est que dès que vous mettez à jour un fichier frontend et que vous enregistrer, gulp fait le travail de raffraichir la page du navigateur web associée à gulp.

En fait, il doit donc disposer d'un dogwatch qui surveille toute modif de l'arbo des fichiers frontend, et qui, s'il trouve une modif, pilote la page navigateur pour demander son raffraichissement.

Pour installer gulp :

  # npm rm --global gulp (Si besoin de supprimer version précédente)
  # npm install --global gulp-cli

Il s'agit d'un générateur de projets JHIPSTER java/angular/liquibase/… Pour l'installer :

  # npm install -g generator-jhipster    

Dernière version de jhipster : # more .yo-rc.json

Remarque : un générateur a besoin d'être lancé à partir d'outil de build, comme yo (yeoman), voir ci-dessous.

  # npm install -g yo

YEOMAN est un utilitaire de création de projet java, PHP, etc … On peut lui attacher des plugins = generators, comme jhipster par exemple, ou bien de webapp ( npm install -g generator-webapp )

bower est un installeur de paquets javascript, destiné au front (un peu comme maven, donc qui gère la récupération des dépendances du paquet qu'on installe) On retrouvera dans son projet en cours les différents paquets installé dans le fichier bower.json :

"dependencies": {
  "angular": "1.5.8",
  "angular-aria": "1.5.8",
  "angular-bootstrap": "1.3.3",
   ...

Effectivement, on retrouve ensuite les différents paquets dans le dossier <Project>\src\main\webapp\bower_components (ce path est aussi indiqué dans le fichier bower.json).

Chaque paquet est installé dans son propre dossier, et chacun de ces dossier contient aussi un fichier bower.json, qui indique à son tour les dépendances à d'autres éventuels paquets

Pour installer bower :

  # npm install -g bower

• Sous eclipse, créer un projet java (par exemple TESTIFT_JHI)

puis

• Click droit sur projet > Configure > Convert to maven project (sélectionner archive war)

• Click droit sur projet > Propriete > Compilateur > Selection 1.8

et Java Build path > Changer librairie JRE à 1.8

• Dans eclipse, supprimer du buildpath le dossier src ===

# cd <pathToProject>/testify_jhi
# yo jhipster

? (1/13) Which *type* of application would you like to create? Monolithic application (recommended for simple projects) ? (2/13) What is the base name of your application? testify ? (3/13) What is your default Java package name? ? (4/13) Which *type* of authentication would you like to use? HTTP Session Authentication (stateful, default Spring Security mechanism) ? (5/13) Which *type* of database would you like to use? (Use arrow keys)

  > SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle)			

? (5/13) Which *type* of database would you like to use? SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle) ? (6/13) Which *production* database would you like to use? MySQL ? (7/13) Which *development* database would you like to use? MySQL ? (8/13) Do you want to use Hibernate 2nd level cache? Yes, with ehcache (local cache, for a single node) ? (9/13) Would you like to use Maven or Gradle for building the backend? Maven ? (10/13) Which other technologies would you like to use? (Press <space> to select, <a> to toggle all, <i> to inverse selection) ? (11/13) Would you like to use the LibSass stylesheet preprocessor for your CSS? No ? (12/13) Would you like to enable internationalization support? No ? (13/13) Which testing frameworks would you like to use? (Press <space> to select, <a> to toggle all, <i> to inverse selection)Gatling

–> génère les classes java (backend) –> les modules de noje.js (dans le dossier node_modules du projet) via la commande npm install –> les packages angularJS (dans le bowerComponents du projet) via la commande bower install ( dernières ligne du projet Using gulpfile C:\dev\workspaces\TESTIFY_JHI\gulpfile.js

...

gulp-inject 64 files into index.html

...

Finished 'inject:…' 17ms )

Sous eclipse, changer le build path du projet : Supprimer tous les dossiers src existant et ajouter à minima les dossiers sources suivants :

<Projet>/src/main/java
<Projet>/src/main/resources
<Projet>/src/test/java
<Projet>/src/test/resources

<dependency>
	<groupId>mysql</groupId>
	<artifactId>mysql-connector-java</artifactId>
</dependency>
		

Paramétrage pour le profil de dev (profil utilisé par défaut par maven si non indiqué) :

• Aller dans le fichier <Projet>\src\main\resources\config\application-dev.yml
• Remplacer la section datasource par

datasource:

           type: com.zaxxer.hikari.HikariDataSource
           url: jdbc:mysql://localhost:3306/testify_jhi?useUnicode=true&characterEncoding=utf8&useSSL=false
           name:
           username: root
           password: root
           hikari:
           data-source-properties:
                 cachePrepStmts: true
                 prepStmtCacheSize: 250
                 prepStmtCacheSqlLimit: 2048
                 useServerPrepStmts: true
				
* Dans la section jpa: 
    remplacer le champ "database-platform:..." 
    par   database-platform: org.hibernate.dialect.MySQL5InnoDBDialect 
    et le champ "database:..."  par   database: MYSQL				        
		
* profiles: Ajouter
     include: swagger # automatically set the 'swagger' profile
		
		

Click droit sur projet > Maven build (ou maven springboot run (org.springframework.boot:spring-boot-maven-plugin:1.3.6.RELEASE:run) fera le travail)

Remarque : bizarre, les tests ne semble pas mettre en place la base de donnée (peut être qu'ils utilisent une base java) Le schéma testify est mis à jour par Liquibase (voir plus bas), au moment du run de l'appli, à partir des changelogs pas encore joués ( tables databasechangelog et databasechangeloglock )

 # mvn org.springframework.boot:spring-boot-maven-plugin:1.3.6.RELEASE:run

ou encore

 # mvn spring-boot:run

• Cliquer sur le bouton de Debug
• Dans projet, tapper le nom du projet eclipse JHIPSTER
• Dans main class, parcourir pour trouver la classe dont le nom se termine par App ; elle est annoté avec :

  @ComponentScan
  @EnableAutoConfiguration(exclude = { MetricFilterAutoConfiguration.class, MetricRepositoryAutoConfiguration.class })
  @EnableConfigurationProperties({ JHipsterProperties.class, LiquibaseProperties.class })

• Cliquer sur debug