Des boites à outils pour développer des applications Web intégrées au poste client (1ère Partie)

Des applications natives aux applications Intranet, un grand pas a été franchi dans le SI.
Cependant, les applications Métiers s’inscrivent désormais dans un environnement contraint, et si on pouvait marier le meilleur des deux mondes avec NW.js ou Electron?

La révolution intranet et ses limitations

Les applications dans les entreprises sont passées en quelques années du monde de l’application native, s’exécutant dans un environnement Windows, Mac ou Linux, à celui de l’application Intranet.

Les applications Intranet reposent aujourd’hui sur trois standards, qui sont HTML, CSS et EcmaScript (ES) (ainsi que les langages transpilés en ES).

Grâce au serveur HTTP qui expose les éléments, il est aisé de mettre à disposition l’application à tous les utilisateurs de l’entreprise, tout en gardant une gestion centralisée des éléments.

Si cette révolution a permis de faciliter un certain nombre de processus (le déploiement comme souligné précédemment, mais aussi le développement, la maintenance, et la supervision),  elle présente de nombreuses limitations liées au fait que ces applications s’exécutent dans un navigateur.

Les applications Intranet s’exécutent dans des navigateurs banalisés qui, par leur rôle de fenêtre vers l’extérieur « Internet », voient leurs fonctionnalités d’interaction avec l’environnement de l’utilisateur extrêmement réduites. En effet, elles sont limitées sur de nombreux axes parmi lesquels on retrouve la sécurité applicative, l’adaptation fonctionnelle (complexité de la navigation internet et les transitions inter-écran par exemple) et la capacité technique (impossibilité de mettre une fenêtre en avant par exemple).

C’est pour cela qu’est apparu, il y a environ quatre ans, un nouvel outil permettant de combler le fossé entre applications Intranet et application natives.

Le projet, né dans les laboratoires d’Intel, est nommé node-webkit et devient quelque temps après NW.js. Parallèlement, une autre solution est apparue, Electron (anciennement atom-shell).

C’est quoi ce NW.js ?

Ce logiciel open-source et libre est basé sur Chromium et Node.js. Il permet à des applications écrites en ES d’appeler du code Node.js à partir du navigateur intégré basé sur Chromium. Il permet donc, à l’image de ce que propose les Webviews d’Android ou d’iOS, d’intégrer des applications prévues pour le web sur le bureau de votre système d’exploitation préféré.

Oui, mais n’est-ce pas ce que propose déjà un navigateur web standard ?

Effectivement, mais le navigateur banalisé est très peu paramétrable, et il est limité en interactions avec le système d’exploitation, ceci limitant très fortement l’expérience utilisateur.

De nombreuses applications, que vous utilisez peut-être déjà, reposent sur cette plateforme.

La proximité de ces deux technologies avec celle utilisée dans les applications Intranet de nos clients permet d’entrevoir de nouveaux usages innovants qui permettent d’offrir une interactivité jusqu’à maintenant impossible.

NW.js partage avec Electron une même approche du développement. Dans cet article, je présente les bases proposées par ces outils en me focalisant spécifiquement sur NW.js.

Allez, on commence par un Hello World avec NW.js

Commençons par télécharger le produit sur https://nwjs.io/downloads/

Plusieurs moutures sont disponibles en fonction du système d’exploitation cible. On trouve surtout deux packages distincts, le package dit normal et celui dit SDK : le premier est le paquetage de livraison final alors que le second inclut les outils d’aide au développement. Nous choisirons le deuxième car c’est cette partie qui va nous intéresser.

Une application NW.js est très similaire à une application Node.js. Elle repose sur les mêmes outils, et la même structure de construction.

Tout commence par un fichier package.json qui fournit les informations de l’application.


package.json
{
<strong>    "name"</strong>: "Bonjour Le Monde!",
<strong>    "version"</strong>: "1.0.0",
<strong>    "main"</strong>: "static/index.html",
<strong>    "window"</strong>: {
<strong>        "show"</strong>: true,
<strong>        "frame"</strong>: true,
<strong>        "position"</strong>: "center",
<strong>        "width"</strong>: 360,
<strong>        "height"</strong>: 300,
<strong>        "min_width"</strong>: 220,
<strong>        "min_height"</strong>: 220
    }
}

On constate tout de suite une section qui diffère de ce qui est communément trouvée dans une application Node.js, la section window dont on reparlera après.


static/index.html
<!DOCTYPE html>
<html>
          <body>
                   <h1>Bonjour le Monde!</h1>
          </body>
</html>

Ces deux fichiers sont organisés dans un même répertoire :

Structure du projet NW.js

Et on peut tout de suite démarrer notre application :

$ nw blog1/

Page d'accueil de l'application NW.js

On constate tout de suite le résultat puisque notre application nw.js apparait à l’écran. Donc à l’inverse d’une application Node.js, pas besoin d’ouvrir de navigateur puisque le socle le fournit avec la dernière version de Chromium. Un appui sur la touche <F12> du clavier et nous retrouvons le débogueur familier des outils de la famille Chromium.

Déboguer NW.js avec Chromium

 

Ok, donc on a un navigateur complet, qui ne propose pas par défaut de barre de navigation, ce qui est déjà un atout puisque c’est un élément difficilement gérable dans les utilisations intranet.

Comme nous sommes dans un contexte JavaScript, tous les frameworks d’interface utilisateur tels que Angular.js, React.js, Ember.js sont disponibles.

Quand l’application native devient une application Web

Mais cela ne s’arrête pas là bien sûr. Le premier élément important, c’est que si NW.js expose des pages web embarquées dans les livrables, il est capable de très bien servir des pages distantes issues de serveurs web. Remplacez la valeur de la propriété main dans package.json de la façon suivante:


package.json
{
…
<strong>     "main"</strong>: " https://www.soprasteria.com/fr",
…
}

Et c’est maintenant le site SopraSteria qui est exposé sur le bureau comme une application Windows standard.Une page distante

Bon on est capable d’afficher des pages locales et de pages distantes. Mais qu’est-ce que nous avons de plus ?

Et bien comme nous l’avons évoqué au début de cet article, NW.js est construit au-dessus de Node.js :

une application dispose donc de l’ensemble des APIs disponibles dans cet environnement, comme la gestion des fichiers, la manipulation des sockets (http, websocket, mail), etc.

De plus, de nombreuses API liées à l’environnement graphique sont disponibles.

On trouve parmi celles-ci :

  • La gestion complète des fenêtres : déplacement, taille, transparence, bordure, z-order ;
  • L’interaction avec les écrans de la machine et le clavier (création de combinaison de touches spécifiques) ;
  • La gestion de menus natifs ;
  • L’interaction avec les icones du tray ;
  • La manipulation du presse-papier ;
  • Le système reposant sur Chromium avec l’accès aux API ChromeApps ;
  • Et encore bien d’autres fonctionnalités.

Exemple d’utilisation des APIs dans le script principal de la fenêtre en cours :


// Accès à la fenêtre courante.</em></strong>
var win = nw.Window.get();

// Ajout d'un callback pour recevoir les notifications de réduction.
win.on('minimize', function() {
console.log('La fenêtre est réduite');
});

// Réduction programmatique de la fenêtre
win.minimize();

// Suppression des callbacks associés à la réduction.
win.removeAllListeners('minimize');

// Ouverture d'une seconde fenêtre ouverte sur github.com
nw.Window.open('https://github.com', {}, function(new_win) {
     new_win.on('loaded', function() {
// Lorsque la fenêtre est disponible créer une barre de menu.
          var menu = new nw.Menu({type: 'menubar'});
// Créer un sous-menu
          var submenu = new nw.Menu();
          submenu.append(new nw.MenuItem({ label: 'Ouvrir' }));
          submenu.append(new nw.MenuItem({ label: 'Quitter' }));
// Créer une entrée de menu principal
// et l'associer au sous-menu
          menu.append(new nw.MenuItem({
              label: 'Fichier',
              submenu: submenu
          }));

// Modifier le menu ouvrir pour le rendre innopérant.
          submenu.items[0].enabled = false

// Modifier le menu quitter pour lui associer 
// la combinaison de touches ctrl-alt-q
// et fermer l'application nw.js si activé.
          submenu.items[1].click = function() { nw.App.quit() }
          submenu.items[1].key = 'q'
          submenu.items[1].modifiers = 'ctrl-alt'

// Assigner ce menu à la nouvelle fenêtre.
          new_win.menu = menu;

// Positionnement absolu à l'écran par rapport 
// au bas de l'écran.
var bottom = nw.Screen.screens[0].bounds.height;
          new_win.y = bottom - 250;
          new_win.x = 400;

// Lorsque la seconde fenêtre est activée par l'utilisateur 
          new_win.on('focus', function() {
              console.log('La fenêtre secondaire a été activée');
// La fenêtre reste au dessus de toutes les autres.
              new_win.setAlwaysOnTop(true);
// Ouvrir un document avec l'application 
// spécifique du poste (Word)
              nw.Shell.openItem('MonDocument.docx');
          });
     });
});

// Accès au presse-papier système
var clipboard = nw.Clipboard.get();

// Récupération du texte se trouvant dedans.
var text = clipboard.get('text');
console.log(text);

Ces différentes API permettent de fournir un nouveau niveau d’interaction avec l’environnement de l’utilisateur.

Conclusion

Utilisé dans un système de borne multimédia ou de billetterie, les possibilités par rapport à un navigateur standard sont extrêmement intéressantes.

Mais le vrai potentiel est dans l’utilisation de nos application clientes.

Une telle puissance et un accès aux ressources de la machine nécessite d’offrir un niveau de sécurité permettant de protéger le poste client de toute utilisation dangereuse.

Dans les parties suivantes de cet article nous explorerons les mécaniques permettant de :

  • Gérer la sécurité ;
  • Injecter dans une application Intranet existante de nouvelles fonctionnalités ;
  • Écrire des applications Intranet pouvant s’exécuter soit dans un navigateur standard, soit dans l’environnement NW.js avec les fonctionnalités étendues ;
  • Distribuer et mettre à jour un environnement NW.js.

Leave a Reply

Your email address will not be published. Required fields are marked *