ACSEO vous présente le framework electron

Electron est un framework de création d’application cross-platform à partir des technologies HTML,CSS et Javascript.

TODO : Les différentes plateformes

Simple à prendre en main, il s’installe simplement avec npm : npm install electron -g

Architecture

Un projet typique Electron se compose de 2 types de process. Le processus principal appelé main process : c’est lui qui s’occupe de charger le script principal contenu dans le package.json

Le second processus est le processus de rendu appelé renderer process : Electron étant basé sur un rendu de page web utilisant Chromium, chaque page dans Electron exécute son propre process.

Le main process s’occupe de créer les instances BrowserWindow qui s’occupent elles de démarrer une instance de page web avec son propre renderer process

Il existe des pipes entre les 2 process : ipcRenderer et ipcMain pour envoyer des messages, et le module remote pour faire appel à l’API Electron depuis le client.

Hello World

Les applications Electron basiques sont structurées ainsi :

  • app/
    • json
    • js
    • html

Le fichier package.json est exactement du même type que les fichiers type de Node. Dans ce fichier le script principal est renseigné, exemple :

{

« name » : « app »,

« version » : « 0.1.0 »,

« main » : « main.js »

}

Le fichier main.js de base peu prendre cette forme :

const {app, BrowserWindow} = require(‘electron’)

const path = require(‘path’)

const url = require(‘url’)

 

// 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.

let win

 

function createWindow () {

// Create the browser window.

win = new BrowserWindow({width: 800, height: 600})

 

// and load the index.html of the app.

win.loadURL(url.format({

pathname: path.join(__dirname, ‘index.html’),

protocol: ‘file:’,

slashes: true

}))

 

// Open the DevTools.

win.webContents.openDevTools()

 

// Emitted when the window is closed.

win.on(‘closed’, () => {

// 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.

win = null

})

}

 

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

// Some APIs can only be used after this event occurs.

app.on(‘ready’, createWindow)

 

// Quit when all windows are closed.

app.on(‘window-all-closed’, () => {

// On macOS 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()

}

})

 

app.on(‘activate’, () => {

// On macOS it’s common to re-create a window in the app when the

// dock icon is clicked and there are no other windows open.

if (win === null) {

createWindow()

}

})

 

// In this file you can include the rest of your app’s specific main process

// code. You can also put them in separate files and require them here.

Ensuite voici à quoi peut ressembler le fichier html de base :

<!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>

Et voilà ! Vous avez tout ce qu’il vous faut pour votre application. Maintenant faisons la tourner !

Si vous avez installé Electron globalement (option -g) vous pouvez simplement lancer la commande ci-dessous dans le répertoire app:

electron .

Cela vous permet de tester votre application et de la débugger avec les outils de débuggage classique des navigateurs.

Let’s the magic play !

Une fois que vous avez débuggé votre application, vous souhaitez générer les exécutables de votre applications desktop pour tous les OS possible !

Pour ce faire, c’est très simple. Il vous suffit d’installer un petit module :

npm install electron-package -g

Il vous permettra ensuite lancer la commande :

electron-packager . –all

Cette commande va vous télécharger les fichiers nécessaires et générer les packages des OS associés :

Et ensuite ?

Ensuite vous pouvez développer votre application comme une application html/js classique. Vous pouvez, par exemple, utiliser le module fs :

fs = require(‘fs’);

[…]

fs.readFile(fileName, ‘utf-8’, function(err, data) {

if (err) {

alert(« An error ocurred reading the file : » + err.message);

return;

}

[… Votre code …]

}

Qui vous permet de lire/écrire un fichier système.

Vous pouvez comme cité plus haut faire appel à l’API Electron coté client en utilisant le module remote:

const remote = require(‘electron’).remote;

Pour , par exemple, afficher une boîte de dialogue.

remote.dialog.showMessageBox({

type: ‘warning’,

title: ‘Attention !’,

message: ‘Etes-vous sur de vouloir quitter ?’,

buttons: [‘Tout à fait’, ‘Euh … en fait non.’]

}, function(response) {

if (response == 0) { // Tout à fait

save(1);

}

});

Plus d’information sur Electron : https://electron.atom.io/

Plus d’information sur electron-packager : https://github.com/electron-userland/electron-packager

 

See advanced concepts on the bottom critical portal buy cheap essay of page 129