[Procédure] Applications Vitis - Créer application¶
La première étape est de créer un dépôt dans Development/vitis_apps/application/[nom de votre application] il sera utile de d’initialiser avec ce dépôt les fichiers traditionnels README.md et .gitignore
2. Dossier conf¶
Une fois le dépôt en place nous allons mettre en place les seuls fichiers de code qui seront relatifs à l’application (les autres seront liés à des modules), pour cela créer un dossier conf contenant la structure ci-dessous :
- install/
- apache.conf
- dependency.xml
- fileToDelete.txt
- folderToDelete.txt
- less/
- variables.less
- requires/
- config.js
- requiresApp.js
- Gruntfile.js
- credits.json
- package.json
- properties.json
install/apache.conf¶
Ce fichier sera incorporé en tant qu’alias apache et définira le point d’entrée vers l’application, ci-dessous l’exemple à suivre de l’application FTTH, il suffira de remplacer le nom de l’application sur la première ligne Alias /ftth[ENV]
Alias /ftth[ENV] "[APPDIRECTORY]"
<Directory "[APPDIRECTORY]">
AllowOverride FileInfo
Options FollowSymLinks
Require all granted
</Directory>
install/dependency.xml¶
Ce fichier est l’un des plus importants de l’application car il définit les modules à utiliser ainsi que leurs versions.
Il doit au minimum contenir le framework vitis, pour cela j’intègre le framework en utilisant une branche spécifique à mon application app_ftth.
Il est très important d’utiliser une branche spécifique pour ne pas avoir de conflits avec les autres applications : quand je push sur vitis je ne veux pas impacter l’application GTF du coup j’utilise la branche app_ftth que je merge avec master en temps voulu, de cette manière je contrôle les versions des modules utilisés et je n’empiète pas sur le travail des autres.
<?xml version="1.0" encoding="UTF-8"?>
<!-- Application -->
<installer>
<dependenciesCollection>
<dependency>
<nature>framework</nature>
<name>vitis</name>
<version>app_ftth</version>
</dependency>
</dependenciesCollection>
</installer>
Une fois vitis déclaré il faudra faire de même pour les modules à utiliser dans mon application, on remarque que pour vitis j’ai utilisé framework en tant que nature, la seule différence sera d’utiliser modules pour les modules.
<?xml version="1.0" encoding="UTF-8"?>
<!-- Application -->
<installer>
<dependenciesCollection>
<dependency>
<nature>framework</nature>
<name>vitis</name>
<version>app_ftth</version>
</dependency>
<dependency>
<nature>modules</nature>
<name>module_ftth</name>
<version>app_ftth</version>
</dependency>
</dependenciesCollection>
</installer>
Dans mon exemple FTTH je n’ai qu’in seul module ftth que j’incorpore à mon XML
install/fileToDelete.txt¶
Correspond aux fichiers à supprimer une fois l’application compilée, rien à modifier ici, j’utilise les lignes ci-dessous
package.json
Gruntfile.js
install/folderToDelete.txt¶
Correspond aux dossiers à supprimer une fois l’application compilée, rien à modifier ici, j’utilise les lignes ci-dessous
requires
less/variables.less¶
Ce fichier est le fichier déterminant le style de l’application : on y définit les couleurs à utiliser et les administrateurs pourront y rajouter leur CSS personnalisé.
Attention : ce fichier n’est pas écrasé lors des mises à jour avec VAI.
// user colors
@user-color-theme-1: #23282D;
@user-color-theme-2: #6F8456;
// Veremes colors
@veremes-gtf-color: #39468A;
@veremes-majic-color: #CF461F;
@veremes-qualigeo-color: #832C7A;
@veremes-wab-color: #198D9F;
/*@veremes-vmap-color: #CB0650;*/
@veremes-vmap-color: #198D9F;
@veremes-map-backgroud-color: #020237;
@veremes-gray-backgroud-color: #3A3A3A;
@veremes-light-gray-backgroud-color: #9A9A9A;
// Application colors
@application-color-theme: #39468A; // <- Change this color
@application-lighen-color-theme: lighten(@application-color-theme, 20%);
@application-darken-color-theme: darken(@application-color-theme, 10%);
@application-action-1-color: #337ab7; // blue bootstrap
@application-action-2-color: #5cb85c; // green bootstrap
// Other variables
@ui-grid-bg-image: "../images/ui-grid/wbg.gif";
@font-color-purple: #020237;
// Dimension des vignettes dans les listes.
@ui-grid-thumbnail-width: 100px;
@ui-grid-thumbnail-heigth: 60px;
requires/config.js¶
Permet de lister les fichiers des librairies externes à charger, rien à changer de ce côté, j’utilise les lignes ci-dessous
'use strict';
goog.provide('vitis.application.config');
// Fichiers js et css à charger pour l'application ftth.
var oApplicationFiles = {
'css': [
// Vitis
'css/lib/bootstrap/css/bootstrap.min.css',
'css/lib/jquery/plugins/bootstrap-datepicker/bootstrap-datepicker3.min.css',
'css/lib/jquery/plugins/bootstrap-fileinput/css/fileinput.min.css',
'css/lib/ui-grid/ui-grid.min.css',
'css/lib/jquery/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css',
'css/lib/bootstrap-checkbox/build.css',
'css/lib/bootstrap-checkbox/font-awesome.css',
'css/lib/jquery/plugins/bootstrap-slider/bootstrap-slider.min.css',
'css/lib/jquery/plugins/malihu-custom-scrollbar/jquery.mCustomScrollbar.min.css',
'css/lib/ui-grid/plugins/draggable-rows.less',
'less/main.less',
// App
'modules/vitis/less/main.less',
'modules/ftth/less/main.less',
'css/lib/codemirror/codemirror.css',
'css/lib/codemirror/codemirror_foldgutter.css',
'css/lib/codemirror/map.css',
'css/lib/codemirror/show-hint.css',
'css/lib/jquery/plugins/bootstrap-treeview/bootstrap-treeview.min.css',
'css/lib/jquery/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css',
'css/lib/jquery/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css',
'css/lib/viewer/viewer.min.css'
],
'js': {
'externs': [
// Studio
'javascript/externs/bootbox/bootbox.min.js',
'javascript/externs/codemirror/codemirror.min.js',
'javascript/externs/codemirror/htmlmixed.js',
'javascript/externs/codemirror/css.js',
'javascript/externs/codemirror/javascript.js',
'javascript/externs/codemirror/clike.js',
'javascript/externs/codemirror/php.js',
'javascript/externs/codemirror/xml.js',
'javascript/externs/codemirror/sql.js',
'javascript/externs/codemirror/map.js',
'javascript/externs/codemirror/show-hint.js',
'javascript/externs/codemirror/addon/fold/foldcode.js',
'javascript/externs/codemirror/addon/fold/foldgutter.js',
'javascript/externs/codemirror/addon/fold/brace-fold.js',
'javascript/externs/codemirror/addon/fold/xml-fold.js',
'javascript/externs/angular/modules/ui-codemirror/ui-codemirror.min.js',
'javascript/externs/tinymce/tinymce.min.js',
'javascript/externs/angular/modules/ui-tinymce/tinymce.js',
'javascript/externs/jquery/plugins/bootstrap-treeview/bootstrap-treeview.js',
'javascript/externs/jquery/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js',
'javascript/externs/scripts_cryptage.js',
'javascript/externs/moment/moment.min.js',
'javascript/externs/moment/min/moment-with-locales.min.js',
'javascript/externs/jquery/plugins/notify/notify.js',
'javascript/externs/jquery/plugins/bootstrap-colorpicker/bootstrap-colorpicker.min.js',
'javascript/externs/jquery/plugins/bootstrap-confirmation/bootstrap-confirmation.min.js',
'javascript/externs/jquery/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js',
'javascript/externs/viewer/viewer.min.js'
]
},
'vitisModuleDependencies': ['ui.codemirror', 'ui.tinymce', 'ui.grid.draggable-rows']
};
requires/requiresApp.js¶
Permet de lister les dépendances JS à charger avec closure, après goog.provide('vitis.application.requires');
j’incorpore les scritps à inclure pour différents modules
/**
* Ce fichier permet de charger les fichiers de l'applicaiton
* de façon non compilée
* @author: Armand Bahi
*/
goog.provide('vitis.application.requires');
goog.require('ftth.script_module');
Gruntfile.js¶
Ce fichier va permettre à closure de savoir quels fichiers utiliser pour la compilation, il faudra ajouter les dossiers contenant les différents modules (lignes 31 et 88) ainsi que modifier les noms des fichiers compilés par le nom de l’application (lignes 56, 62 et 94)
module.exports = function (grunt) {
var compilerPackage = require('google-closure-compiler');
compilerPackage.grunt(grunt);
var devMode = grunt.option('dev');
var sHome = '../';
if (devMode) {
sHome = '../client/';
}
var sClosureDepsHome = '../../../../../';
// Project configuration.
grunt.initConfig({
'closure-compiler': {
ftth: {
files: {
[sHome + '/javascript/ftth.min.js']: [
// Fichiers Vitis
sHome + 'javascript/require/*.js',
sHome + 'javascript/app/**/*.js',
sHome + 'javascript/externs/formReader/**/*.js',
sHome + 'javascript/externs/mapJSON/**/*.js',
sHome + 'modules/vitis/javascript/**/*.js',
// OpenLayers
sHome + 'javascript/externs/openLayers/**/*.js',
// Fichiers ftth
sHome + 'conf/requires/*.js',
sHome + 'modules/ftth/javascript/**/*.js'
]
},
options: {
js: [
'node_modules/google-closure-library/closure/goog/**.js',
'!node_modules/google-closure-library/closure/goog/**_test.js'
],
externs: [
'closure/externs/angular-1.3.js',
'closure/externs/bingmaps.js',
'closure/externs/jquery-1.9.js',
'closure/externs/bootstrap.js',
'closure/externs/geojson.js',
'closure/externs/jspdf.js',
'closure/externs/html2canvas.js'
],
compilation_level: 'ADVANCED',
manage_closure_dependencies: true,
generate_exports: true,
angular_pass: true,
debug: false,
language_in: 'ECMASCRIPT5',
language_out: 'ECMASCRIPT5',
closure_entry_point: ['vitis'],
create_source_map: sHome + '/javascript/ftth.min.js.map',
output_wrapper: '(function(){\n%output%\n}).call(this)\n//# sourceMappingURL=../javascript/ftth.min.js.map'
}
},
formReader: {
files: {
[sHome + '/javascript/externs/formReader/formReader.min.js']: [
// Fichiers FormReader
sHome + 'javascript/externs/formReader/**/*.js'
]
},
options: {
compilation_level: 'WHITESPACE_ONLY',
angular_pass: true,
language_in: 'ECMASCRIPT5',
language_out: 'ECMASCRIPT5'
}
}
},
'closureDepsWriter': {
options: {
depswriter: 'closure/depswriter/depswriter.py',
root_with_prefix: [
// Fichiers Vitis
'"' + sHome + 'javascript/app ' + sClosureDepsHome + 'javascript/app"',
'"' + sHome + 'modules/vitis/javascript ' + sClosureDepsHome + 'modules/vitis/javascript"',
'"' + sHome + 'javascript/externs/formReader ' + sClosureDepsHome + 'javascript/externs/formReader"',
'"' + sHome + 'javascript/externs/mapJSON ' + sClosureDepsHome + 'javascript/externs/mapJSON"',
'"' + sHome + 'conf/requires ' + sClosureDepsHome + 'conf/requires"',
// OpenLayers
'"' + sHome + 'javascript/externs/openLayers ' + sClosureDepsHome + 'javascript/externs/openLayers"',
// Fichiers ftth
'"' + sHome + 'modules/ftth/javascript ' + sClosureDepsHome + 'modules/ftth/javascript"',
// Closure library
'"' + sHome + 'conf/node_modules/google-closure-library/closure/goog ' + sClosureDepsHome + 'conf/node_modules/google-closure-library/closure/goog"'
]
},
targetName: {
dest: sHome + '/javascript/ftth.deps.js'
}
}
});
grunt.loadNpmTasks('grunt-closure-tools');
// Tache par défaut
// cmd: grunt
grunt.registerTask('default', ['closureDepsWriter', 'closure-compiler:ftth']);
// cmd: grunt generate-deps
grunt.registerTask('generate-deps', ['closureDepsWriter']);
// cmd: grunt formReader minify
grunt.registerTask('minify-formReader', ['closure-compiler:formReader']);
// cmd: grunt formReader and studio minify
grunt.registerTask('minify-libs', ['closure-compiler:formReader']);
// cmd: grunt compile
grunt.registerTask('compile', ['closure-compiler:ftth']);
};
credits.json¶
Crédits à intégrer dans l’application
[
{
"label": "CREDITS_SOFTWARE",
"rows": [
{
"type": "text",
"value": "FTTH"
}
]
},
{
"label": "CREDITS_VERSION",
"rows": [
{
"type": "text",
"value": "CREDITS_VERSION_CONTENT"
}
]
},
{
"label": "CREDITS_DATE",
"rows": [
{
"type": "text",
"value": "CREDITS_DATE_CONTENT"
}
]
},
{
"label": "CREDITS_EDITOR",
"rows": [
{
"type": "link",
"value": "Veremes",
"url": "http://www.veremes.com"
}
]
},
{
"label": "CREDITS_AUTHOR",
"rows": [
{
"type": "text",
"value": "Armand Bahi"
},
{
"type": "text",
"value": "Alexandre Bizien"
},
{
"type": "text",
"value": "Anthony Borghi"
},
{
"type": "text",
"value": "Frédéric Carretero"
},
{
"type": "text",
"value": "Olivier Gayte"
},
{
"type": "text",
"value": "Sébastien Legrand"
},
{
"type": "text",
"value": "Laurent Panabieres"
},
{
"type": "text",
"value": "Yoann Perollet"
}
]
},
{
"label": "CREDITS_GRAPHICS",
"rows": [
{
"type": "link",
"value": "Nematis",
"url": "http://www.nematis.com"
}
]
},
{
"label": "CREDITS_LIBRARIES",
"rows": [
{
"type": "link",
"value": "Bootstrap",
"url": "http://getbootstrap.com"
},
{
"type": "link",
"value": "AngularJS",
"url": "https://angularjs.org"
},
{
"type": "link",
"value": "Google Closure",
"url": "https://developers.google.com/closure"
},
{
"type": "link",
"value": "jQuery",
"url": "http://jquery.com"
},
{
"type": "link",
"value": "Rgraph",
"url": "http://www.rgraph.net"
},
{
"type": "link",
"value": "CodeMirror",
"url": "http://codemirror.net"
},
{
"type": "link",
"value": "OpenLayers",
"url": "http://openlayers.org"
},
{
"type": "link",
"value": "TinyMCE",
"url": "https://www.tinymce.com"
}
]
},
{
"label": "CREDITS_CONTACT",
"rows": [
{
"type": "link",
"value": "www.veremes.com",
"url": "http://www.veremes.com"
},
{
"type": "link",
"value": "www.veremes.com/nous-contacter#1",
"url": "http://www.veremes.com/nous-contacter#1"
}
]
},
{
"label": "CREDITS_LICENSE",
"rows": [
{
"type": "link",
"value": "Cecill-B",
"url": "http://www.cecill.info/licences/Licence_CeCILL-B_V1-fr.html"
}
]
}
]
package.json¶
Fichier utilisé par npm lors de la phase de compilation, à utiliser comme ci-dessous
{
"name": "Vitis",
"version": "0.1.0"
}
properties.json¶
Properties client à intégrer
{
"services_alias": "rest[ENV]",
"web_server_name": "https://[hostname]:[PORT]/",
"version": "[VERSION]",
"build": "[BUILD]",
"status": "unstable",
"month_year": "[MONTH_YEAR]",
"application": "extraction",
"environment": "[ENV]"
}
Désormais notre application est viable et VAI saura la générer.