All posts in HTML 5

Le meilleur d’AngularJS et de Cordova : ngCordova

 cta-image

ngCordova

Si vous voulez développer rapidement une application Phonegap/Cordova sans vouloir utiliser toute la stack mean.io ou ionic, je vous conseille vivement ngCordova.

L’idée est d’encapsuler des plugins Phonegap/Cordova dans des services AngularJS. Mais dans quel but exactement… ?

Ne pas ré-inventer la roue

Bénéficiant d’une communauté active, ngCordova implémente la plupart des plugins nécessaires (photo, network, vidéo…). Trouver son bonheur parmi tous ces plugins n’est donc pas chose difficile. En quelques étapes d’installation, notre plugin est prêt à être utilisé et s’intègre parfaitement dans nos contrôleurs AngularJS. Pas besoin donc de créer soi-même l’encapsulation de ces services, si ce n’est pour savoir le faire.

Installation

L’installation de ngCordova se fait de la même façon que n’importe quel autre composant bower.

bower install ngCordova

Les sources sont téléchargées et copiées dans le sous-répertoire bower_components.

bower_components/ngCordova/
├── bower.json
├── CHANGELOG.md
├── dist
│   ├── ng-cordova.js
│   ├── ng-cordova.min.js
│   ├── ng-cordova-mocks.js
│   └── ng-cordova-mocks.min.js
├── LICENSE
├── package.json
└── README.md

Les sources de ngCordova sont maintenant prêtes à être injectées dans votre application AngularJS. Pour cela, il faut renseigner le fichier dans index.html et la dépendance dans votre fichier app.js.

index.html

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

app.js

angular.module('myApp', ['ngCordova'])

Et voila !

Utilisation

Tous les services ngCordova sont directement injectables dans vos composants AngularJS, par exemple pour utiliser le service des dialogues :

module.controller('MyCtrl', function($scope, $cordovaDialogs) {

  $cordovaDialogs.alert('message', 'title', 'button name')
    .then(function() {
      // Le bouton a été cliqué, écrire le code correspondant ...
    });

});

Et c’est la même chose pour tous les autres services : autre exemple pour utiliser le service de fichiers et des photos :

module.controller('MyCtrl', function($scope, $cordovaFile) {

    $cordovaFile.getFreeDiskSpace()
      .then(function (success) {
         // success in kilobytes
      }, function (error) {
          // error
      });

});

module.controller('MyCtrl', function($scope, $cordovaMedia) {

    var media = $cordovaMedia.newMedia("/src/audio.mp3").then(function() {
        // success
    }, function () {
        // error
    });

    media.play();

});

Il devient alors très facile d’imbriquer tous ces composants afin de construire une application HTML5 riche. Toutes les fonctionnalités de base sont couvertes et sont disponibles sur Github.

ngCordovaMocks

Tester son code sur du vrai matériel n’est pas toujours possible. Pour cela, il nous faut une solution pour tester ses composants sur notre navigateur préféré. C’est là qu’intervient ngCordovaMocks.

Comme son nom l’indique, cette librairie vas nous permettre de “mocker” les appels à certains services.

L’installation se fait de la même manière que pour ngCordova : via bower.

bower install ng-cordova-mocks

Ensuite, il faut rajouter le script dans sa page :

<script src="lib/ngCordova/dist/ng-cordova-mocks.js"></script>

Et dans son fichier app.js :

angular.module('myApp', ['ngCordovaMocks'])

Ceci dit, on ne peut pas ajouter ngCordova et ngCordovaMocks sur la même page, et il devient très pénible de devoir changer ces deux lignes à chaque changement d’environnement. Pour cela on va utiliser gulp (site officiel) et son plugin gulp-preprocess (npm) pour éviter de le faire manuellement. Pour une installation et utilisation de gulp, voir cet article.

La page html devient alors :

<!-- @if NODE_ENV='DEVICE-DEVELOPMENT' -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- @endif -->

<!-- @if NODE_ENV='DESKTOP-DEVELOPMENT' -->
<script src="lib/ngCordova/dist/ng-cordova-mocks.js"></script>
<!-- @endif -->

Le fichier app.js devient :

// @if NODE_ENV == 'DEVICE-DEVELOPMENT'
angular.module('myApp', ['ngCordova'])
// @endif

// @if NODE_ENV == 'DESKTOP-DEVELOPMENT'
angular.module('myApp', ['ngCordovaMocks'])
// @endif

Et le gulpfile associé :

gulp.task('device-development', function() {
    gulp.src('./www/gulp_preprocess_me/*.js')
    .pipe(preprocess({context: { NODE_ENV: 'DEVICE-DEVELOPMENT'}}))
    .pipe(gulp.dest('./www/js/'));

    gulp.src('./www/gulp_preprocess_me/index.html')
    .pipe(preprocess({context: { NODE_ENV: 'DEVICE-DEVELOPMENT'}}))
    .pipe(gulp.dest('./www/'));
});

gulp.task('desktop-development', function() {
    gulp.src('./www/gulp_preprocess_me/*.js')
    .pipe(preprocess({context: { NODE_ENV: 'DESKTOP-DEVELOPMENT'}}))
    .pipe(gulp.dest('./www/js/'));

    gulp.src('./www/gulp_preprocess_me/index.html')
    .pipe(preprocess({context: { NODE_ENV: 'DESKTOP-DEVELOPMENT'}}))
    .pipe(gulp.dest('./www/'));
});

En une ligne de commande vous pouvez maintenant choisir d’utiliser la libriaire ngCordova pour un développement sur mobile, ou bien ngCordovaMocks pour un développement sur desktop.

gulp device-development
gulp desktop-development

Attention quand même au déploiement : ne surtout pas envoyer la librairie des mocks en production 🙂

Conclusion

Pour rapidement utiliser ngCordova et ses plugins, une phase de configuration et d’outillage est nécessaire et peut s’avérer un peu longue. Néanmoins, une fois cette étape réalisée, l’installation de nouveaux plugins, leur utilisation, et leur déboggage sont très simplifiés. Toutes les documentations sont disponibles sur http://ngcordova.com/docs/plugins/ et sur les dépôts des plugins. Maintenant, à vos claviers…

Architecturer ses applications JS à l’aide du pattern MVVM

Pourquoi imposer une architecture à nos applications ?

Nos projets en JavaScript deviennent de plus en plus complexes : par leur taille, par leur fonctionnement et par leur coût de développement.

Le nombre d’outils et de librairies accessibles aux développeurs ne cesse de grandir et ce n’est pas en 2015 que la cadence va s’arrêter. Il est donc de plus en plus facile de se perdre et de rendre notre code illisible, difficilement maintenable et évolutif.

Toute notre problématique est là : rendre nos applications scalables pour les :

  • Maintenir
    -> Facilement améliorer le code courant
    -> Rendre son code compréhensible de tous
  • Adapter
    -> Inclure de nouvelles librairies
    -> Etendre, changer des parties
  • Debugger
    -> Tester chaque partie de manière indépendante
  • Développer plus rapidement
    -> Chaque développeur peut travailler en parallèle.

Le pattern MVVM va nous aider à résoudre ces problèmes tout en nous simplifiant la vie.

Pattern MVVM

Le pattern MVVM est un dérivé du célèbre modèle de conception MVC.

L’ancêtre MVC

L’idée principale du MVC, signifiant Model-View-Controller, est de découper l’application en trois parties interconnectées :

  • Model: représente les données reçues du serveur
  • View: contient l’ensemble des vues affichées à l’utilisateur
  • Controller: contient la logique de l’application

MVC

Le Modèle définit la structure des données et communique avec le serveur.
La Vue affiche les informations du Modèle et reçoit les actions de l’utilisateur.
Le Contrôleur gère les évènements et la mise à jour de la Vue et du Modèle.

Nous avons un premier découpage de l’application qui nous permet déjà de répondre à certaines de nos problématiques. En identifiant clairement les parties logiques, nous pouvons plus facilement maintenir notre application et la tester.

Mais qu’en est-il de l’adaptation et de l’évolution de notre application ? Si le modèle de données est amené à changer, nous devons obligatoirement modifier l’ensemble de nos entités.

Qu’apporte alors le pattern MVVM et que signifie-t-il ?

Principes du MVVM

MVVM est l’acronyme de : Model-View-ViewModel.

On pourrait donc simplement croire qu’on a remplacé le nom Controller par ViewModel. Mais si nous reprenons le schéma précédent avec le pattern MVVM, nous obtenons les interactions suivantes :

MVVM-2

La Vue reçoit toujours les actions de l’utilisateur et interagit seulement avec le ViewModel.
Le Modèle communique avec le serveur et notifie le ViewModel de son changement.

Le ViewModel s’occupe de :

  • présenter les données du Model à la Vue,
  • recevoir les changements de données de la Vue,
  • demander au Model de se modifier.

Data Binding

La Vue n’a donc plus aucun lien avec le Model. Ainsi le ViewModel s’occupe entièrement du cycle de modification de ce dernier. Il réalise à la fois la réception et l’envoi des données à la Vue. On parle alors de « data binding ». Les informations affichées sont liées entre deux entités et mises à jour en temps réel.

Ce dernier mécanisme est la clef du pattern MVVM. Il nous permet de découpler les différentes parties de notre application en étant capable de la faire évoluer de manière modulaire.

Dans le schéma suivant, nous pouvons voir qu’un même Modèle peut notifier plusieurs ViewModel de son changement. Ainsi ces ViewModel vont à leur tour indiquer à leur Vue de se rafraîchir.

mvvm-sample-2

Si la Vue n°2 modifie le Model, la Vue n°1 sera automatiquement mise à jour.

Du fait de cette indépendance entre la Vue et le Modèle, nous pouvons modifier ou remplacer les différents composants visuels sans impacter le cœur de notre application. Nous pouvons également changer, améliorer la logique de notre application à travers le ViewModel sans toucher à la Vue et au Model.

Presenter

Le pattern MVVM est également cité comme une extension du MVP : Model-View-Presenter.

La structure de données que nous recevons du serveur n’est pas forcément celle à afficher à l’utilisateur. Il est néanmoins conseillé de garder cette structure initiale pour pouvoir l’exploiter à d’autres moments.  Le ViewModel peut présenter à la Vue, une autre structure ou des données formatées différemment.

Cet aspect du MVVM va nous permettre de facilement modifier nos services et donc notre Modèle sans toucher à la Vue. Seul le ViewModel devra se réadapter pour fournir à la Vue les mêmes informations.

Un autre avantage est la possibilité de mocker nos Webservices dans le ViewModel. Ainsi nous pouvons travailler sur notre IHM en parallèle de la mise en place de nos WebServices.

Implémentations

Il existe de nombreux frameworks Javascript, qui permettent de développer des applications MVVM et qui fournissent des outils pour réaliser un data-binding.

Voyons comment au travers de trois frameworks : KnockoutJS, AngularJS et ExtJS, nous pouvons créer une application TodoList. Notre exemple sera volontairement simple pour faire apparaître les différents mécanismes du MVVM.

Notre application sera composée de deux vues :

Vue 1 :
Un formulaire d’édition composé de :
– Un bouton : au clic une nouvelle tâche est ajoutée.
– Un input texte : affiche et édite la tâche en cours.
– Un label : affiche le nombre de tâches.

Vue 2 :
Une liste de label : chaque label affichera le titre d’une tâche.
Au clic sur un label, la tâche courante sera modifiée pour afficher dans le formulaire, le titre sélectionné.

Notre modèle sera composé de deux « classes » :

Une classe Task, pour définir une tâche, composée d’un titre

Une classe Setting contenant :
– La tâche courante à éditer.
– La liste de toutes les tâches crées.

class-2

KnockOutJS

KnockoutJS est une libraire Javascript, qui peut facilement s’intégrer à une architecture déjà existante. Elle propose plusieurs outils pour simplifier et automatiser  la mise à jour de l’UI lorsque les données changent.

Model

On définit les deux classes. Chaque propriété doit être attribuée à partir des méthodes « observables » de KnockOutJS. L’appel à ces méthodes va permettre d’enregistrer ces données pour écouter leur modification.

var Task = function (title, index) {
    this.title = ko.observable(title);
};

var Setting = function() {
    var task = new Task("new task");
    this.currentTask = ko.observable(task);
    this.tasks = ko.observableArray([task]);
};
var setting = new Setting();

ViewModel

Les ViewModel contiennent :

  • le modèle, également écouté par KnockOutJS via ko.observable.
  • des données calculées via la méthode ko.computed, qui vont permettre d’étendre le modèle de base.
  • la logique de la Vue.

Chaque ViewModel s’occupe d’une partie logique côté IHM.

// ViewModel associé au formulaire d’édition d’une tâche
var FormViewModel = function () {
    // charge le modèle dans le ViewModel
    this.setting = ko.observable(setting);
    
    // ajoute une nouvelle tâche dans la liste
    // et change la tâche courante avec celle-ci
    this.addNewTask = function() {
        var currentTask = new Task("new task");
        this.setting().tasks.push(currentTask);
        this.setting().currentTask(currentTask);
    }.bind(this);

    // retourne le nombre de tâches
    // propriété calculé, étendant le modèle
    this.remainingCount = ko.computed(function () {
        return this.setting().tasks().length;
    }.bind(this));
};

// crée le ViewModel et l’applique à la bonne vue
var formViewModel = new FormViewModel();
ko.applyBindings(formViewModel, document.getElementById("form"));

// ViewModel associé à la vue de la liste des tâches
var ListViewModel = function () {

    // charge le même modèle
    this.setting = ko.observable(setting);

    // change la tâche courante
    this.editTask = function(item) {
        this.setting().currentTask(item);
    }.bind(this);
}

// crée le ViewModel et l’applique à la bonne vue
var listViewModel = new ListViewModel();
ko.applyBindings(listViewModel, document.getElementById("list"));

View

La Vue, décrite en html, récupère les données et les méthodes depuis le ViewModel. A l’aide de la propriété data-bind, nous déclarons toutes nos liaisons à des données et des méthodes.

// formulaire d’édition d’une tâche
<div id="form">

    // méthode addNewTask définit dans le ViewModel
    <button class="add" data-bind="click: $root.addNewTask"></button>

    //bind la tâche courante depuis le ViewModel
    <input id="new-todo" data-bind="value: setting.currentTask.title , valueUpdate: 'afterkeydown' " autofocus>

    //bind le nombre de tâches ajoutées
    <strong data-bind="text: remainingCount">0</strong>

</div>


//liste des tâches
<div id="list">
    <ul id="todo-list" data-bind="foreach: tasks">
        <li>
            <label data-bind="text: title, event: { click: $root.editTask }"></label>
        </li>
    </ul>
</div>

Le tag « input » affiche et modifie la valeur currentTask.title.

L’objet currentTask est aussi affiché dans la liste, via la propriété tasks du Modèle Setting.

Ainsi lorsque l’utilisateur clique sur un tag « label », le titre de la tâche s’affiche dans l’input du formulaire. Si ce dernier modifie cette valeur, le label de la liste est automatiquement mis à jour.

AngularJS

AngularJS n’est plus vraiment à présenter. La framework JS made in Google n’implémente pas à proprement parlé le pattern MVVM. On utilise le $scope comme ViewModel. On parle alors plus de MVW, pour Model-View-Whatever. L’important ici est de séparer la Vue et le Modèle.

Model

Nous n’avons pas besoin de créer de structure de Model spécifique. Angular se rappelle des valeurs précédemment stockées et envoie un évènement si elles sont différentes. Il nous suffit alors d’instancier un objet avec les propriétés que nous voulons utiliser. On peut également utiliser les Services d’AngularJS pour initialiser nos modèles depuis un serveur et les fournir ensuite au ViewModel.

//initialisation de la première tâche
var task = {title : 'new task'};

//créer un objet global contenant
//un tableau de tâches
//et la tâche courante
var setting = {};
setting.currentTask = task;
setting.tasks = [task];

ViewModel

Côté ViewModel, nous nous rapprochons de ce que peut produire KnockOutJS. C’est pourquoi on compare souvent ces deux frameworks pour créer des applications MVVM. Nous déclarons deux ViewModel, qui garde une référence sur le même objet setting, qui est ajouté un $scope.

angular.module('myApp', [])

    //ViewModel utilisé par le formulaire
    .controller('FormViewModel', ['$scope', function($scope) {

        //charge le modèle dans le ViewModel
        $scope.setting = setting;

        //méthode d’ajout d’une tâche
        $scope.addTask = function() {
            var newtask = {title : "new task"}
            $scope.setting.tasks.push(newtask);
            $scope.setting.currentTask = newtask;
        };

        //retourne le nombre de tâches
        //la propriété calculée, permet d’étendre le modèle
        $scope.nbtasks = function() {
            var count = 0;
            angular.forEach($scope.setting.tasks, function(todo) {
                count += 1;
            });
            return count;
        };
    }])

    //ViewModel utilisé par la liste
    .controller('ListViewModel', ['$scope', function($scope) {

        //charge le même modèle
        $scope.setting = setting;

        //méthode permettant d’éditer une tâche
        $scope.editTask = function(task) {
            $scope.setting.currentTask = task;
        };
    }]);

View

Les Vues, décrites en HTML, déclarent leur ViewModel et indiquent quelles données et méthodes vont être liées. Encore une fois seule la syntaxe diffère de KnockoutJS. On utilise la propriété ng-model ou des doubles accolades pour lier le modèle à la vue.

//formulaire d’édition d’une tâche
<div ng-controller="FormViewModel">
    <span>nb tasks : {{nbtasks()}}</span>
    <form ng-submit="addTask()">
        <input class="btn-primary" type="submit" value="add new task"/>
    </form>
    <input type="text" ng-model="setting.currentTask.title" size="30"/>
</div>

//liste des tâches
<div ng-controller="ListViewModel">
    <ul>
        <li ng-repeat="task in setting.tasks">
            <span ng-click="editTask(task)">{{task.title}}</span>
        </li>
    </ul>
</div>

ExtJS 5

ExtJS dans sa version 5 propose une implémentation revisitée du MVVM . En plus du ViewModel, il introduit une quatrième entité : le ViewController.  Associé à une unique Vue, le ViewController va permettre de gérer le comportement et la logique de la Vue, alors que le ViewModel se cantonne au rôle de Presenter.

2.3.1  Model

Nous déclarons une tâche et un setting, avec la syntaxe ExtJS. Nous créons aussi  une collection de tâches et une collection de settings. Cette dernière va nous permettre de récupérer les settings n’importe où. De plus nous utilisons cette collection pour ajouter des méthodes de manipulation sur le Modèle.

//structure d’une tâche, composée uniquement d’un titre
Ext.define(‘Task’, {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'title',
        type: 'string',
        defaultValue : 'new task'
    }]
});

//donnée globale de l’application
//contient la liste de toutes les tâches
//et la tâche courante
Ext.define(‘Settings', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'currentTicket',
    },{
        name: 'tasks',
    }]
});

//définit une collection de tâches
Ext.define(‘Tasks, {
    extend: 'Ext.data.Store',
    model : 'Task
    storeId : tasks
});

//définit une collection de settings
//cette collection ne contiendra qu’un seul élément
Ext.define('SettingsStore', {
    extend: 'Ext.data.Store',
    storeId : 'settings',
    model : 'Settings',

    //méthode appelée au chargement de l’application 
    load : function() {

        //ajoute un seul element Settings
        var settings = Ext.create('Settings');
        settings.set(tasks, Ext.create('Tasks'));
        this.add(settings);

        //ajoute une première tâche
        this.addTask();
    },

    //ajoute une nouvelle tâche
    addTask : function() {
        var newTask = Ext.create('Task');
        this.getAt(0).get('tasks').add(newTask);
        this.setCurrentTask(newTask);
    },

    //met à jour la tâche courante
    setCurrentTask : function(task) {
        this.getAt(0).set('currentTask', task);
    }
});

ViewModel et View Controller

Le ViewModel n’est utilisé que pour présenter les données.

Le ViewController est utilisé pour charger les données dans le ViewModel et gérer la logique de la Vue. Chaque ViewController récupère le même modèle Settings et le fournit à son ViewModel.

Ainsi les deux vues manipuleront le même objet sans interagir ensemble.

//ViewModel du composant graphique FormTask
Ext.define('FormTaskViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.formtask',

    //data à binder
    data : {
        settings : null
    },

    //data “calculée” à binder
    formulas : {
        nbTasks : function(get) {
            return get('settings.tasks').count();
        }
    }
});

//ViewController du composant graphique FormTask
Ext.define('FormTaskViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.formtask',

    //méthode appelée automatiquement à l’initialisation
    init : function() {

        //récupère le model settings
        var setting = Ext.getStore('settings').getAt(0);

        //charge le modèle dans le ViewModel
        this.getViewModel().set('settings', setting);
    },

    onClickCreateButton : function(cmp) {
        //ajoute une nouvelle task
        this.getViewModel().get('settings').store.addTask();
    }
});

// ViewModel du composant graphique GridTicket
Ext.define('MVVM.view.GridTicketViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.gridticket',
    data : {
        settings : null
    }
});

//ViewController associé à la vue GridTicket
Ext.define('MVVM.view.GridTicketViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.gridticket',

    init : function() {

        //récupère le model settings
        var setting = Ext.getStore('settings').getAt(0);

        //charge le modèle dans le ViewModel
        this.getViewModel().set('settings', setting);
    },

    onSelectRow : function(cmp, model) {
        //modifie la tâche courante par celle sélectionné
        this.getViewModel().get('settings').store.setCurrentTicket(model);
    }
});

View

Les Vues en ExtJS sont décrites dans des objets. Chaque Vue déclare son ViewModel et son ViewController, mais n’appelle jamais ses instances. Il suffit alors d’utiliser le mot clef ‘bind’ pour lier la valeur dans le ViewModel à celle de la Vue.

//Composant graphique définissant le formulaire d’édition d’une tâche
Ext.define('FormTask', {
    extend: 'Ext.form.Panel',

    //déclaration du viewcontroller associé
    controller: 'formtask',

    //declaration du viewmodel associé
    viewModel: {
        type: 'formtask'
    },

    items : [{
        xtype : 'button',
        label : 'Create new Task',
        //fonction définit dans le ViewController
        handler : 'onClickCreateButton'
    },{
        xtype : 'textfield',
        fieldLabel : 'Title',
        name: 'title',
        allowBlank: false,
        bind : {
            //affiche le titre de la tâche courante
            value : '{settings.currentTask.title}'
        }
    }, {
        xtype : 'label',
        //affiche le nombre de tâches
        bind : '{nbTasks}'
    }]
});

//Composant graphique définissant la liste des tâches
Ext.define('MVVM.view.GridTicket', {
    extend: 'Ext.grid.Panel',
    xtype : 'grid-ticket',
    controller: 'gridticket',
    viewModel: {
        type: 'gridticket'
    },

        // bind la collection de tâches
        // le composant Ext.grid.Panel s’occupe 
        // d’afficher automatiquement toutes les tâches
    bind : {
        store : '{settings.tickets}'
    },

    //affiche dans cette colonne la propriété ‘title’ de chaque tâche
    columns : [{
        text: 'Tasks',
        dataIndex : 'title'
    }],

    //au clic sur une ligne, on exécute la méthode 'onSelectRow'
    listeners : {
        select : 'onSelectRow'
    }
});

Conclusion

Chaque framework a sa propre manière et syntaxe pour implémenter le pattern MVVM. Le principe d’indépendance entre la Vue et le Modèle est à chaque fois respecté et tous proposent des outils pour mettre en place un data-binding entre la Vue et le ViewModel.

Chaque framework a ses propres avantages :

  • KnockoutJS est peu intrusif en étant une simple librairie.
  • AngularJS est le plus simple syntaxiquement et le plus éprouvé par la communauté.
  • ExtJS pousse encore plus à découper notre application et à structurer notre code.

Mais le pattern MVVM n’a pas que des avantages. Pour de petits projets, il peut être contre-productif de proposer une telle architecture.  De plus pour de très gros projets avec de nombreux ViewModel, le data-binding peut consommer la mémoire de manière considérable.

Il n’est donc pas interdit d’implémenter son propre mécanisme de liaison, tant que l’on respecte le découpage complet entre la Vue et le Modèle.

Retour sur le salon SIANE 2012 avec DocDokuPLM

Exposant pour la première année sur le salon SIANE (Salon des Partenaires de l’Industrie du Grand-Sud) qui avait lieu du 23 au 25 octobre 2012 au Parc des Expositions de Toulouse, je vous propose ici notre REX sur ce salon.

Stand SIANE-DocDokuPLM

Notre première participation était pour nous l’occasion de continuer de promouvoir au sein du tissu industriel régional, national et international notre solution innovante DocDokuPLM et donc également de capter sur le terrain les besoins des industriels en matière de PLM.

Nous avons ainsi rencontré un grand nombre d’industriels et de partenaires sur ce salon, ce qui nous a réellement permis de confronter les besoins concrets des entreprises avec notre solution innovante de PLM. Il est en effet toujours indispensable de garder à l’esprit que la technologie n’a de réelle valeur que si elle est au service des usages.

En résumé donc, je retiendrais que les industriels sont très captifs au fort ROI que propose notre solution Open Source.

En effet, nous avons noté que trois éléments technico-économiques ont retenu l’attention de tous nos visiteurs lors de ce salon :

– la possibilité de visualiseur tous types de modèles  3D  (Catia, Inventor, AutoCAD, NX…) sur tous types de terminaux (PC/Mac/Tablettes/Smartphones) directement dans le navigateur internet sans aucune installation ou plugin,
– notre modèle de coût non proportionnel au nombre de postes déployés puisque aucun déploiement nécessaire (donc pas de coût de licence, modèle Open Source), ceci permettant de ne pas limiter les usagers et les usages pour encore plus de ROI,
– la facilité d’intégration de notre solution moderne et résolument orientée web et cloud-ready avec l’existant (CAO, autre PLM, ERP, applications métiers…).

Mais nous avons surtout constaté que les avantages technico-écoonomiques de notre solution procurent une réelle valeur ajoutée métier au sein des industries puisque capables de susciter des nouveaux usages :

– pour le partage des données autour des modèles 3D dans un contexte d’entreprise encore plus étendue (entre clients, fournisseurs et partenaires) grâce au cloud,
– pour une meilleure information produit en situation de mobilité lors des phases d’assemblage et de maintenance,
– pour les managers souhaitant visualiser simplement l’avancement du produit, le montrer et communiquer atour de ce dernier,
– pour le marketing et les commerciaux pouvant enfin disposer simplement depuis n’importe où de la dernière version produit en clientèle !

Enfin, nous avons également relevé une fonctionnalité qui nous a été demandée à plusieurs reprises et qui sera donc prochainement incluse dans notre roadmap  : la possibilité d’effectuer des relevés ou mesures 3D des produits directement sur le modèle 3D, très utile pour les opérationnels mais également pour les utilisateurs devant réaliser des devis et tarifer selon les dimensions des solides.

Bilan extrêmement positif et enrichissant donc pour ce salon SIANE 2012 avec quelques contacts très intéressants à approfondir !

Pour information, le prochain salon où nous serons présent avec DocDokuPLM est un salon international plus orienté grands comptes de l’aéronautique et du spatial,du 4 au 6 décembre 2012 à Toulouse : Aeromart 2012.

Retour sur notre présence au Mobile World Congress 2012

Quelques jours passés au sein du MWC 2012 à Barcelone la semaine passée m’amène aujourd’hui à écrire ce billet.
L’objectif principal de notre présence sur ce salon (milles mercis à Midi-Pyrénées Expansion et à Ubifrance au passage) était de réaliser à la fois un maximum de veille technologique mais également de rencontrer des partenaires potentiels.

Le premier constat que l’on fait lorsqu’on arrive sur le site de Fira Barcelona est le gigantisme de ce salon.  En effet, ce salon draine environ 70 000 visiteurs, 1 500 exposants…  je vous invite d’ailleurs à jeter un œil sur le site de l’évènement : http://www.mobileworldcongress.com/2012-highlights.html

MWC 2012 - So huge

Difficile donc d’être exhaustif lors d’un salon comme celui-ci. J’ai donc orienté ma visite sur un échantillon représentatif de constructeurs, éditeurs et fournisseurs de services du domaine. Je m’en vais vous livrer les grandes tendances selon moi de ce salon.

L’omniprésence d’Android

Google et la communauté Android ont frappé fort sur ce salon, avec une présence imposante, reflet de l’adoption du marché et des professionnels.

L’ « Android Planet » était bien évidemment impressionnante sur ce salon, avec de nombreux stands, animations Google mais aussi avec la présence de nombreux éditeurs (Autodesk, Shazam, …).

Mais ce qui m’a le plus marqué était certainement le plébiscite de l’OS auprès des professionnels du domaine :

– les constructeurs : Motorola, HTC, Samsung, Sony Ericsson, Alctalel TCT, Intel, ZTE… même RIM s’y met avec son runtime Android (le preuve ci-dessous)

RIM Android Runtime

– les éditeurs : VMWare et sa solution de virtualisation pour « Make Android Entreprise-ready », Ubuntu avec sa version Ubuntu for Android pour la rencontre du meilleur des deux mondes (mobile et PC), Firefox et sa version très performante pour tablette Android…

Quelle montée en puissance !! « Demain, un Android dans chaque poche », imagine le patron de Google, Eric Schmidt.

Les NFC se rapprochent


Bon nombre d’exposants (Safran Morpho ci-dessus, Gemalto, Google, Sony…) ont démontré la maturité de cette technologie, tant au niveau des équipements (puces et téléphones) que des couches logicielles (cf API Beam de Google par exemple). Nos amis coréens sont largement en avance sur les usages NFC c’est un fait. Mais même si peu de freins technologiques subsistent aujourd’hui, en Europe ce sont plutôt les réticences psychologiques des utilisateurs (liées à la sécurité pour le paiement notamment) et les aspects stratégiques entre opérateurs, banques et éditeurs qui ralentissent sa progression. Mais 2013 sera l’année de son explosion apparemment !

La quête de performances

Ce salon a été également l’occasion de constater une véritable course à la performance des plateformes mobiles tant au niveau des constructeurs que des éditeurs.

J’ai en effet par exemple assisté à une session impressionnante chez Intel avec la démonstration du nouveau téléphone Orange Santa Clara équipé du nouveau processeur Atom Medfield à très basse consommation.  Après une belle session de dix minutes de jeux de voiture 3D sur le stand, le téléphone ne chauffe même pas alors que la fluidité est vraiment au rendez-vous.

Ensuite, une petite visite s’imposait sur le stand de Microsoft qui proposait un challenge « against » son dernier Windows Phone 8. Voici  le tableau d’affichage en milieu de semaine :

L’arrivée imminente du réseau 4G

La 4G arrive en force sur nos devices mobiles, la Corée du Sud aura semble-t-elle fini son déploiement national fin 2012.  SFR en France annonce le même résultat sur son réseau. Vous avez donc compris que le très haut débit arrive sur le mobile avec le passage de nos communications mobiles sur de la voix sur IP (n’ayant assisté à aucune conférence sur le sujet, un grand merci à Eric Fruit de ephoneNet pour son œil expert).

Pour conclure, je dirai modestement que ce salon était sans surprise, aucune innovation de rupture technologique forte ne m’étant apparue. L’innovation se trouve et se manifestera désormais par l’usage et certainement par la capacité à adapter les technologies aux nouveaux besoins BtoC mais aussi BtoB orienté Système d’Information (notre réel savoir-faire pour le coup).

Je vous prépare un billet complémentaire pour la semaine prochaine au niveau des tendances applicatives (MCommerce, Gestion de flottes, Marketing Mobile, HTML5…).

DocDoku et Webinage font carton plein à la Mêlée Numérique XV !

Cette année encore, DocDoku était présent à la Mêlée Numérique et accompagné d’un partenaire de grande qualité avec Webinage.

Sur le stand de DocDoku, vous avez pu assisté à la présentation de l’application tactile que nous avons réalisée pour et avec Webinage.

Vous avez été également très nombreux à vouloir une démonstration de notre solution de GED Open Source disponible en SaaS.

Ces deux journées ont donc été plus que satisfaisantes pour l’équipe DocDoku car un public de qualité était au rendez-vous.

La conférence sur « HTML 5 ou l’évolution majeure du web et de l’internet mobile » présentée par Florent Garin notre Directeur Technique et Thomas van de Velde, Directeur Général de Webinage a rencontré un grand succès, avec la participation d’une centaine de personnes dans la salle !

Si vous n’avez pas pu assisté à la conférence, la présentation sera prochainement disponible sur notre blog et sur le site internet de la Mêlée Numérique.

DocDoku vous offre une tablette tactile pour tout contrat signé à la Mêlée Numérique XV

DocDoku aura le plaisir de vous accueillir sur son stand lors de la 15ème édition de la Mêlée Numérique à l’Espace Diagora de Toulouse Labège, les mercredi 20 et jeudi 21 avril 2011. Le Salon des TIC numéro 1 sur le Sud Ouest rassemble tous les acteurs économiques des solutions de l’informatique, des nouvelles technologies, des télécoms et de l’innovation. Au programme : 150 exposants, 45 ateliers et conférences et plus de 3000 visiteurs attendus.

L’actualité de DocDoku
Cet évènement sera l’occasion pour DocDoku de vous présenter sa dernière réalisation tactile entièrement développée au moyen de technologies innovantes Open Source (HTML 5, CSS3, JQuery, SIPCommunicator…). Venez également échanger avec nous sur notre solution de gestion du cycle de vie des produits (Product Lifecycle Management) Open Source, qui est incubée au sein d’OW2 et devrait être lancée au début de l’année prochaine.

Animation sur le stand
Assistez à une démonstration de l’application multiplateforme Webinage, notre dernière réalisation tactile entièrement développée au moyen de technologies innovantes Open Source.

Animation atelier
Notre directeur technique, Florent Garin, animera également un atelier sur « HTML 5 ou l’évolution majeure du web et de l’internet mobile » le mercredi 20 avril de 16h30 à 17h30 . Inscrivez-vous sur le site du salon.

A Propos de DocDoku
DocDoku est un cabinet de conseil et de formation innovant disposant d’une expertise sur les technologies et solutions Open Source (Java, JEE, Android, DocDoku, Liferay…). Cette expertise nous permet d’avoir la confiance de clients majeurs comme Amadeus, Axa, Cegedim, Dassault, LG, Motorola, Météo France, Mia Electric, MSA, NEC ou Pierre & Vacances.
Nativement éditeur de la solution libre éponyme de gestion collaborative de documents (GED ou ECM), notre activité résolument tournée vers la recherche et développement nous permet d’apporter une réelle valeur ajoutée à nos prestations de conseil, d’expertise, de formation et de réalisation de projets dans le domaine IT.
Nos consultants sont très impliqués dans nos projets de recherche et développement essentiellement Open Source et assurent une veille technologique permanente.

Plus d’information sur le salon
Mercredi 20 et jeudi 21 avril 2011 à l’Espace Diagora de Toulouse Labège. Entrée gratuite Le site du salon : http://www.meleenumerique.com

Contact Presse
M. Eric Descargues Téléphone : 05 61 72 24 09

Mentions Légales
DocDoku SARL au capital de 20 000 euros RCS Toulouse : 492 273 800 000 28 Code APE : 5829C Buroplis – Bâtiment B – 150 rue Nicolas Louis Vauquelin 31100 Toulouse
http://www.docdoku.com

HTML 5, the next big thing

HTML 5 est assurément la prochaine révolution en matière de développement de sites internet et d’applications web. Grâce entre autres à WebGL (API 3D), WebSocket (connexions TCP full-duplex) ou encore Web Storage (stockage de données en local côté navigateur) il n’y a plus de frontière entre applications natives et applications web et cela sans plugin.

Pour se convaincre des possibilités, il suffit de voir le portage du jeu Quake 2 sur ces technologies.