xms-ovh-dokuwiki

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
===== Presentation =====
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 : 
   - il demande au serveur web la page index.html
   - 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.
   - une fois terminé, il rend la page index.html complète au client, et le client web n'aura plus besoin de ses services
   - 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.

===== NPM : gestionnaire de paquet ===== 

 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 :
   - Suivre les instructions de [[https://nodejs.org/en/]]
   - Puis installer la dernière version npm
    # npm install -g npm


=== Présentation et installation de gulp ===

 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

=== Présentation et installation de generator-jhipster ===
 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.

=== Présentation et installation de YEOMAN ===
    # 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 )

=== Présentation et installation de bower ===
 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


===== Creer un projet JHIPSTER =====

=== 1. Creation du projet eclipse ===
  * 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 ===

=== 2. Générer le projet jhipster ===
	# 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
 )
	
=== 3. Reparamétrer eclipse  ===
 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

===== Customisation du projet ECLIPSE JHIPSTER généré =====
=== 4. Vérifier que la dépendance MYSQL est bien présente dans le pom.xml (ficher de build MAVEN) du projet ===
	<dependency>
		<groupId>mysql</groupId>
		<artifactId>mysql-connector-java</artifactId>
	</dependency>
			
=== 5. Paramétrer l'acces à la base de données ===
 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
			
			
=== 6. Lancer le premier build dans eclipse ===
 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 )
			
=== 7. Lancer le projet et croiser les doigts ===
== Avec maven ==
   # mvn org.springframework.boot:spring-boot-maven-plugin:1.3.6.RELEASE:run
 ou encore
   # mvn spring-boot:run

== Directement via eclipse, en debug ==
  * 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
xms-ovh-dokuwiki

Outils pour utilisateurs

Outils du site

Outils de la page
