248 lines
8.1 KiB
Markdown
248 lines
8.1 KiB
Markdown
|
# 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` de` package.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] [share-data].
|
||
|
|
|
||
|
|
## Écrivez votre première application Electron
|
||
|
|
|
||
|
|
Généralement, une application Electron est structurée comme ceci:
|
||
|
|
|
||
|
|
```text
|
||
|
|
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:
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"name" : "your-app",
|
||
|
|
"version" : "0.1.0",
|
||
|
|
"main" : "main.js"
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
__Note__: Si le champ `main` n'est pas présent dans` package.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:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
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:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!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`](https://github.com/electron-userland/electron-prebuilt) 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:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
electron .
|
||
|
|
```
|
||
|
|
|
||
|
|
Si vous l'avez installé localement:
|
||
|
|
|
||
|
|
#### macOS / Linux
|
||
|
|
|
||
|
|
```bash
|
||
|
|
$ ./node_modules/.bin/electron .
|
||
|
|
```
|
||
|
|
|
||
|
|
#### Windows
|
||
|
|
|
||
|
|
```bash
|
||
|
|
$ .\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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
$ .\electron\electron.exe your-app\
|
||
|
|
```
|
||
|
|
|
||
|
|
#### Linux
|
||
|
|
|
||
|
|
```bash
|
||
|
|
$ ./electron/electron your-app/
|
||
|
|
```
|
||
|
|
|
||
|
|
#### macOS
|
||
|
|
|
||
|
|
```bash
|
||
|
|
$ ./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](https://github.com/electron/electron/releases).
|
||
|
|
|
||
|
|
### 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](https://git-scm.com) et [Node.js](https://nodejs.org/en/download/) (que comprend [npm](https://npmjs.org)) sur votre système.
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 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](http://electron.atom.io/community/#boilerplates)
|
||
|
|
Créé par la communauté impressionnante d'électrons.
|
||
|
|
|
||
|
|
[share-data]: ../faq.md#how-to-share-data-between-web-pages
|