Démarrage Rapide

Electron vous permet de créer des applications de bureau avec du JavaScript fournissant un runtime avec des API riches natives (système d'exploitation). Vous pourriez le voir comme une variante d'un Node.js directement exécutable sur le bureau au lieu des serveurs Web.

Cela ne signifie pas que Electron est une liaison JavaScript à l'interface utilisateur graphique (GUI). Au lieu de cela, Electron utilise des pages Web comme GUI, donc vous pouvez aussi le voir comme un navigateur minimal Chromium, contrôlé par JavaScript.

Processus principal

Dans Electron, le processus qui exécute le script main depackage.json est appelé le processus principal. Le script qui s'exécute dans le processus principal peut afficher une interface graphique en créant des pages Web.

Processus de rendu

Puisque Electron utilise Chromium pour afficher des pages Web, Chromium Multi-process architecture est également utilisé. Chaque page Web d'Electron fonctionne avec son propre processus, qui est appelé le processus de rendu..

Dans les navigateurs normaux, les pages Web sont habituellement exécutées dans un environnement aux ressources indépendantes. Les utilisateurs d'électrons ont cependant le pouvoir d'utiliser les API Node.js dans des pages Web permettant un système d'exploitation de niveau inférieur d'interactions.

Différences entre le processus principal et le processus de rendu

Le processus principal crée des pages Web en créant des instances BrowserWindow. Chaque instance BrowserWindow exécute la page Web dans son propre processus de rendu. Lorsqu'une occurrence BrowserWindow est détruite, le processus de rendu correspondant est également terminée.

Le processus principal gère toutes les pages Web et leur processus rendu correspondant. Chaque processus de rendu est isolé et ne se soucie que de la page Web en cours d'exécution.

Dans les pages Web, l'appel des API relatives aux GUI natives n'est pas autorisé car la gestion des ressources natives GUI dans les pages Web sont très dangereuse, il est facile de perdre des ressources. Si vous souhaitez effectuer des opérations GUI dans une page Web, le Processus de la page Web doit communiquer avec le processus principal pour lui demander d'effectur ces opérations.

Dans Electron, nous avons plusieurs façons de communiquer entre le processus principal et le processeurs. Comme [ipcRenderer] (../ api / ipc-renderer.md) et [IpcMain] (../ api / ipc-main.md) pour envoyer des messages, et les [Remote] (../ api / remote.md) pour la communication de style RPC. Il y a aussi une entrée de FAQ sur comment partager des données entre des pages Web.

Écrivez votre première application Electron

Généralement, une application Electron est structurée comme ceci:

your-app/
├── package.json
├── main.js
└── index.html

Le format de package.json est exactement le même que celui des modules de Node, et le script spécifié par le champ main est le script de démarrage de votre application, qui exécutera le processus principal. Un exemple de votre package.json peut être comme cela:

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

Note: Si le champ main n'est pas présent danspackage.json, Electron tenter de charger un fichier index.js.

Le fichier main.js devrait créer des fenêtres et gérer les événements du système. Exemple:

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

// Gardez une référence globale de l'objet fenêtre, sinon, la fenêtre
// sera automatiquement fermée lorsque l'objet JavaScript est récupéré.
let win

function createWindow () {
  // Créer la fenêtre du navigateur.
  win = new BrowserWindow({width: 800, height: 600})

  // charger index.html de l'application.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Ouvrir DevTools.
  win.webContents.openDevTools()

  // Émis lorsque la fenêtre est fermée.
  win.on('closed', () => {
    // Déréférencer l'objet fenêtre, habituellement vous stocker des fenêtres
    // dans un tableau si votre application prend en charge plusieurs fenêtres,
    // c'est l'heure où vous devez supprimer l'élément correspondant.
    win = null
  })
}

// Cette méthode sera appelée lorsque Electron aura terminé l'initialisation
// et est prét à créer des fenêtres de navigation. Certaines API ne peuvent
// être utilisées qu'après le lancement de cet événement.
app.on('ready', createWindow)

// Quittez lorsque toutes les fenêtres sont fermées.
app.on('window-all-closed', () => {
  // Sur macOS, il est fréquent que les applications et leur barre de menus
  // restent actives jusqu'à ce que l'utilisateur quitte explicitement avec Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // Sur macOS, il est fréquent de recréer une fenêtre dans l'application lorsque
  // l'icône du dock est cliquée et qu'il n'y a pas d'autres fenêtres ouvertes.
  if (win === null) {
    createWindow()
  }
})

// Dans ce fichier, vous pouvez inclure le reste du code du processus principal
// spécifique de votre application. Vous pouvez également les mettres dans des
// fichiers distincts et les écrire ici.

Enfin, index.html est la page web que vous voulez afficher:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    Nous utilisons le noeud <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    et Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

Exécuter votre application

Une fois que vous avez créé vos fichiers main.js,index.html et package.json, vous voudriez probablement essayer d'exécuter votre application localement pour la tester et vous assurer qu'elle fonctionne comme prévu.

electron

electron est un module npm qui contient des versions pré-compilées d'Electron.

Si vous l'avez installé globalement avec npm, vous n'en aurez pas besoin dans le répertoire source de votre application:

electron .

Si vous l'avez installé localement:

macOS / Linux

$ ./node_modules/.bin/electron .

Windows

$ .\node_modules\.bin\electron .

Executable d'Electron téléchargé manuellement

Si vous avez téléchargé Electron manuellement, vous pouvez également utiliser binaire pour exécuter votre application directement.

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

macOS

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app fait partie du package de libération de l'Electron, vous pouvez télécharger à partir here.

Exécuter en tant que distribution

Une fois que vous avez terminé d'écrire votre application, vous pouvez créer une distribution en suivant le guide [Distribuer une application] (./application-distribution.md) puis exécuter l'application packagée.

Essayez cet exemple

Clonez et exécutez le code dans ce didacticiel en utilisant le [electron/electron-quick-start] (https://github.com/electron/electron-quick-start).

Note: Exécuter cela nécessite Git et Node.js (que comprend npm) sur votre système.

# Clone the repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies
$ npm install
# Run the app
$ npm start

Pour plus d'exemples app, consultez la section list of boilerplates Créé par la communauté impressionnante d'électrons.