[Devoxx 2013] Des applications natives avec Node-Webkit

devoxx 2013 Mercredi matin, Stephan Janssen a fait quelques annonces à propos de Parleys. En particulier, il a mentionné l’arrivée prochaine d’une application Parleys venant remplacer l’actuelle en Adobe AIR.

Celle-ci reprend la nouvelle interface HTML5 et ajoute la possibilité de télécharger des présentations. Quand il n’y a pas de connexion Internet, l’interface se restreint automatiquement aux vidéos présentes sur la machine. Ce nouveau client est réalisé avec node-webkit.

Node-Webkit

Jeudi, Roger Wang a présenté cet outil (Introduction to the node-webkit runtime).

Node-webkit permet de créer des applications natives en utilisant les technologies du Web. Node-Webkit est l’union de Chromium et de Node.js. Cela permet aux applications ainsi créées d’accéder à plus de 40000 modules Node.js.

Développement

Le développement se déroule comme une application Web classique : on réunit dans un dossier les ressources (images, css et scripts) et les pages HTML.

   -app
   +css
   +images
   +js
   +lib
   +partials
   index.html

En plus de cela, il faut ajouter un fichier package.json pour configurer l’application. Seuls deux clés sont obligatoires :

  • name : le nom de l’application
  • main : la page HTML à charger au démarrage de l’application

D’autres options sont également disponibles. Par exemple, la clé window permet de configurer l’apparence de la fenêtre principale (taille, position, affichage de la barre d’outils). La clé dependencies permet de déclarer les modules Node.js requis. Ceux-ci doivent être présents dans le sous-dossier nodes_modules.

{ "name": "App",
   "main": "index.html",
   "window": {
      "width": 1000,
      "height": 800,
      "toolbar": false
}, "dependencies": { ... }}

Le débuggage s’effectue grâce aux Chrome Developer Tools. Comme dans Chrome ou Chromium, on peut alors inspecter le DOM, accéder à la console ou débugger le javascript.

<html>
  <body>
    <ul>
      <script>
         function getUserHome()
            {return process.env.HOME || process.env.HOMEPATH || process.env.USERPROFILE;}
         var fs = require("fs");
         var home = getUserHome();
         var results = fs.readdirSync(home);
         results.forEach(function(result)
         {document.write("<li>"+result+"</li>");});
      </script>
    </ul>
  </body>
</html>

Intégration avec l’OS

Node-webkit met à disposition une API permettant de mieux s’intégrer avec l’OS de l’utilisateur. On peut ainsi créer des menus, ajouter une icône dans la barre des tâches ou encore demander à l’OS d’ouvrir un fichier avec le programme adéquat.

Le “Mode Kiosque”

Les applications Node-Webkit peuvent être exécutées en “Mode Kiosque”. Ce mode consiste à mettre l’application en plein écran et restreindre l’accès à la machine (bloquer le changement d’application, interdire le redémarrage,  empêcher la fermeture de l’application…).

Attention : sous Windows et Linux, les combinaisons de touches Alt+F4 et Ctrl+Alt+Del fonctionnent toujours. Ce mode fonctionne mieux sous Mac car il y a une API intégrée (Mac OS Kisk Mode).

Il y a deux méthodes pour accéder à ce mode : on peut soit l’activer dans le fichier package.json, soit utiliser l’API.

{..."window": { "kiosk": true }...}
var gui = require('nw.gui');gui.Window.get().enterKioskMode();

Une fois le “Mode Kiosque” activé, il n’y a pas de moyen d’en sortir. Il faut prévoir un moyen dans l’application pour qu’un administrateur puisse désactiver ce mode.

var gui = require('nw.gui');gui.Window.get().enterKioskMode();

Packaging

Il y a plusieurs moyens de distribuer l’application. Je ne parlerai ici que de l’exécutable “all-in-one” (pour plus d’informations sur les différentes façons de distribuer son application : Packaging).

Pour distribuer l’application, il faut d’abord créer un zip avec tous les fichiers.
Attention : il faut que le fichier package.json soit à la racine du zip.

Ensuite, sous windows et linux, il faut concaténer l’exécutable de Node-webkit et le zip.

Sous Linux :

cat nw app.zip > MyNativeApp

Sous Windows :

copy /b nw.exe+app.zip MyNativeApp.exe

Sur Mac, le procédé est légèrement différent. En effet, une application est en réalité un dossier avec .app comme extension. Il faut donc nommer le zip app.nw et le placer dans le sous-dossier Content/Resources de l’application node-wekit.app. Si on veut accélérer le démarrage de l’application, on peut mettre un dossier app.nw contenant les fichiers de l’application à la place du zip app.nw.

cp -r node-webkit.app MyNativeapp.app/Contents/Resources/
cp app.nw MyNativeapp.app/Contents/Resources/

Exemples d’applications créées avec Node-webkit

Circadio : Une application de gestion de temps (http://getcircadio.com)

Circadio : une application de gestion de temps (http://getcircadio.com)

Haroopad : Un éditeur Markdown (http://pad.haroopress/com)

Haroopad : un éditeur Markdown (http://pad.haroopress.com)

TagSpace : Un outil d'indéxation de fichiers locaux (http://tagspaces.org)

TagSpace : un outil d’indexation de fichiers locaux (http://tagspaces.org)

Conclusions

La présentation m’a donné envie de tester Node-Webkit. En effet, dans un navigateur, une application web est très restreinte. Donner accès à l’univers Node.js dans un navigateur permet de le libérer de toutes ces contraintes. On pourrait créer une application qui utilise le Leap Motion, se connecte à une base de données ou gère un système domotique.

Nombre de vue : 308

AJOUTER UN COMMENTAIRE