Créez une application pour Windows, Mac OS et Linux grâce à vos compétences web et à Electron

Vous avez toujours rêvé de développer une application desktop, mais vous n’avez pas encore eu le courage ou le temps de vous mettre à apprendre comment en créer une. D’ailleurs, créer une application ça doit être compliqué, non ?

Et si je vous disais que grâce aux outils dont nous disposons aujourd’hui et avec vos compétences en HTML/CSS et JS, il est très facile de créer une application pour ordinateur.

Dans ce tutoriel, nous allons ensemble mettre en place l’environnement de développement nécessaire, afin de créer une application, puis nous allons la compiler afin de pouvoir avoir un vrai fichier exécutable. Pour cela, nous allons utiliser Electron.

Créer des applications facilement grâce à Electron JS

Installation et compilation

Tout d’abord, je souhaiterais préciser que ce tutoriel a été réalisé sous un environnement Windows. Il se peut donc que pour les utilisateurs de Mac OS ou Linux, les manipulations diffèrent.

Electron nous permet de rapidement commencer grâce à une application minimale munie de notes intéressantes. Afin de récupérer cette application, il faut avoir Node d’installé. Puis, lancer la console Windows en mode administrateur.

Déplacez-vous dans le dossier du projet grâce à la commande CD, puis entrez les commandes suivantes :

# Permet de récupérer le dossier Quick Start
git clone https://github.com/electron/electron-quick-start

# Se déplacer dans le dossier
cd electron-quick-start

# Installer les dépendances et lancer le programme
npm install && npm start

Après avoir entré ces commandes, le programme lance la compilation. Après quelques secondes ou minutes en fonction de la puissance de votre machine, le programme est compilé et se lance.

Ce que vous remarquez au lancement du programme, c’est qu’il y a l’outil de débogage de Google qui apparait à droite. En effet, la création d’application grâce à Electron, se fait au travers de l’utilisation du navigateur Chromium.

Grâce à cela, nous avons accès aux mêmes outils que lors de la création d’une application web et avec l’avantage de pouvoir la décliner pour un environnement de bureau. Un autre avantage majeur concerne le cross-plateforme. Vous n’avez pas besoin de créer trois différentes applications afin d’atteindre les environnements Windows, Mac OS et Linux, car Electron s’occupe de tout.

Dans cet exemple, nous avons accès à l’outil de débogage, ainsi qu’à la possibilité d’utiliser le Zoom, de rechercher l’application, etc.  Le menu peut évidemment être masqué, les options du menu peuvent être modifiées. Cependant, afin d’avoir une application efficace, il est important de suivre les standards demandés par le système d’exploitation.

Afin d’avoir un programme qui puisse être distribué, vous devez le compiler. Pour cela, vous allez installer electron-packager en global pour pouvoir l’utiliser à tout moment. Puis vous allez lancer la compilation. Entrez les lignes suivantes dans votre invite de commande :

# Installe electron packager en global
npm install electron-packager –g

# Afin de remonter d’un niveau
cd ..

# compile le programme « nom du dossier » « nom du programme »
electron-packager "electron-quick-start" "Hello World"

Après un petit moment, vous avez votre application compilée et prête à être lancé sur n’importe quelle machine Windows.

Créer votre première application

Généralement une application créée avec Electron est composée d’au moins trois fichiers : package.json, main.js et index.html.

votre-application/
├── package.json
├── main.js
└── index.html

Le fichier package.json :

{
  "name"        : "nom-de-l-application",
  "version"     : "0.0.1",
  "main"        : "main.js",
  "devDependencies": {
    "electron-prebuilt": "^0.35.2"
  },
  "scripts" : {
      "start"   : "electron main.js"
  },
  "description" : "description de l'application",
  "author"      : "StoryCom"
}

 

Le fichier package.json peut contenir diverses informations telles que le nom de l’application, le numéro de version, le fichier JS principal (main.js), la description, etc. Si vous décidez de ne pas préciser quel sera le fichier JS principal, Electron essaiera automatiquement de charger un fichier index.js.

Le fichier main.js doit créer les fenêtres et gérer les évènements système. Un exemple typique du fichier main.js :

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 1000, height: 625});

  // and load the index.html of the app.
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});

Pour finir, il y a la page index.html, qui est celle que nous devons afficher.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

Rappelez-vous, nous pouvons créer des applications grâce aux langages web. Cela signifie que la structure que vous avez vue plus haut n’est que le commencement de la création d’une application. Vous pouvez bien évidemment ajouter autant de dossiers que vous le souhaitez afin de structurer votre application. Par exemple :

Tic-tac-toe/
├── css/
├── js/
├── img/
├── music/
├── package.json
├── main.js
└── index.html

Le mot de la fin

Je pense que vous avez compris maintenant que grâce aux outils qui sont à notre disposition, nous pouvons aujourd’hui créer des applications très rapidement. Afin d’aller plus loin encore dans l’apprentissage de Electron, vous pouvez aller sur le site officiel et lire la documentation qui est relativement bien faite. Cela vous guidera dans la création de vos applications.

N’hésitez surtout pas à mettre en pratique ce que vous apprenez, dès que vous en avez l’occasion, car ce n’est qu’en pratiquant que l’on peut progresser. Pour l’occasion, je vous propose de retravailler le jeu du Tic Tac Toe qui a été créé en PHP, afin de le développer en JavaScript pour pouvoir le compiler grâce à Electron. Vous pouvez sans problème vous servir d’une bibliothèque telle que Jquery ou d’un Framework dans les programmes que vous ferez avec Electron.