[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.