Débuter avec l'électron

Installation d’Électron

Dépendances

Pour installer electron, vous devez d’abord installer Node.js, qui est fourni avec npm.

Comment l’installer ?

Utilisez npm :

# Install the `electron` command globally in your $PATH
npm install electron -g

# OR

# Install as a development dependency
npm install electron --save-dev

Bonjour le monde!

Installer

Une structure de projet Electron ressemble généralement à ceci :

hello-world-app/
├── package.json
├── index.js
└── index.html

Créons maintenant les fichiers et initialisons notre package.json.

$ mkdir hello-world-app && cd hello-world-app
$ touch index.js
$ touch index.html
$ npm init

Remarque : Si le paramètre main n’est pas spécifié dans package.json, Electron utilisera index.js comme point d’entrée par défaut.

Le processus principal

Dans Electron, le processus qui exécute le script principal de package.json est appelé processus principal. Ici, nous pouvons afficher une interface graphique en créant des instances BrowserWindow.

Ajoutez ce qui suit à index.js :

const { app, BrowserWindow } = require('electron')

// Global reference to the window object
let win

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

    // Open and load index.html to the window
    win.loadURL('file://' + __dirname + '/index.html')

    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object
        win = null
    });
})

// Quit the app if all windows are closed
app.on('window-all-closed', () => {
    app.quit()
})

Modèle HTML et processus de rendu

Ensuite, nous créons l’interface graphique de l’application. Electron utilise des pages Web comme interface graphique, chacune s’exécutant dans son propre processus appelé processus de rendu.

Ajoutez le code suivant à index.html :

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Lancer l’application

Il existe plusieurs façons d’exécuter une application Electron.

Avec electron-prebuilt installé globalement

Tout d’abord, assurez-vous que [electron-prebuilt est installé](https://www.wikiod.com/fr/electron/debuter-avec-lelectron#Installation d’électron -et-exécutez-le).

Nous pouvons maintenant tester l’application à l’aide de cette commande :

$ electron .

Méthode 2 - Sans electron-prebuilt installé globalement

Tout d’abord, nous devrons entrer dans le dossier de votre application (le dossier où se trouve package.json).

Là, ouvrez une fenêtre Terminal/Invite de commandes et tapez “npm install” pour installer le nécessaire dans le dossier de cette application.

Ensuite, saisissez “npm start” pour exécuter l’application. Gardez à l’esprit que votre package.json doit toujours spécifier un script ‘start’.

Si tout a fonctionné correctement, vous devriez voir quelque chose comme ceci :

[![entrez la description de l’image ici][1]][1]

Toutes nos félicitations! Vous avez créé avec succès votre première application Electron.

[1] : http://i.stack.imgur.com/5Pl2v.png

Processus principal et de rendu. →