All posts in HTML5

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…

Web 3D 2013

Cette année nous étions invités par Christophe Mouton, expert PLM chez EDF, à participer à la fameuse conférence web 3D. Après Las Vegas en 2012, l’édition 2013 se déroulait en Espagne à San Sebastian au Miramar Palace. Le cadre était donc vraiment très agréable, seul le temps, comme en témoigne la photo ci-dessous, n’était pas au beau fixe.

image

En plus de la rédaction d’un poster, j’ai pu présenter pendant près de 40mn un cas d’usage de notre solution DocDokuPLM. « Web 3D » oblige j’ai concentré mon discours sur la partie visualisation 3D de la maquette numérique. J’ai notamment expliqué les nombreuses optimisations que nous avons faites pour s’affranchir des limites intrinsèques des moteurs JavaScript des navigateurs.

Par exemple Chrome ne pouvant allouer plus de 1,4 Go de mémoire, nous devons enlever de la scène les objets non visibles dans le champ de la caméra. Nous avons également implémenté un système de type LOD (Level Of Detail) où chaque pièce d’un assemblage existe en différentes qualités de représentation, plus l’objet étant proche de la caméra meilleur sera son affichage.

Par ailleurs, j’ai moi même assisté à quelques belles sessions, notamment une sur le format XML3D concurrent du X3DOM qui par son héritage de X3D et VRML traine les lacunes inévitables de toutes technologies legacy. XML3D, conçu lui à partir de la feuille blanche, entend devenir le standard pour la 3D déclarative du web. Enfin, j’ai bien apprécié la démonstration de réalité augmentée s’appuyant sur WebRTC, domaine très prometteur que nous explorons déjà !

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.

Formation HTML5

Une nouvelle formation vient de faire son entrée à notre catalogue : « Développer des applications HTML 5 ». Destinée aux développeurs, elle est la synthèse de notre pratique quotidienne depuis plus d’un an de cette technologie conjuguée à l’étude approfondie des normes et spécifications la constituant.

Cette formation s’étale sur 3 jours, l’ensemble des nouveautés d’HTML5 et de CSS3 sera expliqué, nous prendrons également du recul pour traiter des problématiques de conception technique et échanger sur les perspectives qu’ouvrent la plateforme pour les applications métier ou digitales.

La première session inter-entreprises est planifiée du 24 au 26 octobre 2011 à Toulouse au centre ville dans nos nouveaux locaux entièrement rénovés. Thé, café, jus de fruits, viennoiseries et les déjeuners seront offerts aux stagiaires.

Programme complet de la formation HTML5 :
http://www.docdoku.com/formation/html-5/

Inscription et demande d’information :
http://www.docdoku.com/identite/contact/