Vous avez déjà probablement eu ce genre de conversation au travail :
« Nous devons vraiment concevoir une preuve de concept le plus rapidement possible ! » « OK, il vous la faut pour quand ? » « Pour être tout à fait honnête… Pour hier ! »
Dans mon article de blog précédent, je vous ai présenté Hyland University, qui propose un accès gratuit et illimité aux vidéos de formation de Nuxeo Platform. J’ai rapidement évoqué le fait que nous avons utilisé une application AngularJS encapsulée dans une instance Cloud Nuxeo pour concevoir Hyland University. Aujourd’hui, je vais vous expliquer ce concept plus en détail. Laissez-moi vous faire part de notre expérience pour que vous puissiez en apprendre plus sur la conception et le déploiement d’applications AngularJS de qualité dans une instance Nuxeo très rapidement. Pas tout à fait « hier », mais pas loin !
Tout a commencé comme ça avec Hyland University. Nous voulions une preuve de concept rapide, si possible « hier », pour valider notre vision sans investir trop du précieux temps de nos développeurs. Nous avons donc établi une liste de nos pré-requis, qui étaient en fait assez classiques pour une application Web :
- Navigation
- Gestion de contenu
- Gestion des droits d’accès et des utilisateurs
- Application de règles opérationnelles
- Présence d’un back-office pour la gestion
L’instance Nuxeo Platform peut facilement gérer ces éléments. Donc, à l’aide de Nuxeo Studio, nous avons conçu un modèle de contenu avec quelques types de documents dans lequel les cours peuvent référencer des vidéos, et vice-versa.
Comme vous pouvez le voir, c’est une configuration assez classique qu’un utilisateur débutant avec Nuxeo Studio pourrait créer sans problème. Nous avons également ajouté quelques règles opérationnelles à l’aide de chaînes d’automatisation.
Créer une interface utilisateur personnalisée à l’aide d’AngularJS et de l’API REST
Le modèle de contenu était prêt, mais nous savions que l’interface utilisateur Web par défaut de Nuxeo Platform ne serait pas adaptée à Hyland University. Nous avions besoin de quelque chose de plus personnalisé. Heureusement, Nuxeo Platform expose ses ressources et fonctionnalités via une API REST, ce qui permet de créer une UI personnalisée avec n’importe quel langage de programmation.
JavaScript nous est apparu comme la solution évidente pour concevoir une interface « responsive ». Après avoir essayé différents frameworks, notre choix s’est porté sur AngularJS. Nous avions un client javascript Nuxeo JQuery et node.js, mais rien pour AngularJS. Nous avons donc tout construit nous-mêmes ! Et je peux vous dire que le résultat est incroyable ! Voyez par vous-même : client AngularJS Nuxeo.
Nous avons également utilisé un excellent framework d’UI, Semantic UI, pour améliorer l’apparence de Hyland University. Voilà le résultat :
Vous pouvez également utiliser un autre framework à la place de Semantic UI ; par exemple, Bootstrap.
Venons-en à la question la plus importante : Comment effectuer le déploiement ?
Intégrer le projet AngularJS dans une instance Nuxeo
La configuration actuelle aurait été parfaite pour déployer l’application AngularJS dans un système autonome. Mais cela nécessiterait des ressources, la configuration d’un serveur et de nombreuses étapes de configuration par lesquelles nous ne voulions pas passer, surtout que nous disposions de l’infrastructure parfaite à portée de main : Nuxeo Cloud, our Cloud Content Management system!
Pour cette raison, nous avons convenu que notre objectif était d’intégrer l’application AngularJS dans une instance Nuxeo Platform et de diriger les gens vers cette interface à la place de l’interface par défaut.
Pour en arriver là, nous :
- avons créé un projet qui construit l’application AngularJS et la place dans le répertoire nuxeo.war de la plateforme
- l’avons packagée dans un package de la Marketplace Nuxeo pour l’installer et la mettre à jour simplement
- l’avons déployée via le canal privé de la Marketplace Private Marketplace Channel
Nous avons tellement aimé le résultat que nous avons décidé de créer un projet générique pour vous ! C’est le sample Nuxeo Angular et son utilisation est expliquée en détail dans notre page de documentation Developing with AngularJS. Vous pouvez l’essayer et commencer à concevoir d’incroyables expériences Web pour vos utilisateurs. N’oubliez pas de nous faire part de vos commentaires et de vos résultats !
