Create quick-start.md
This commit is contained in:
Casimodo
GitHub
parent
8ae7d01d1a
commit
7b240d82fd
1 changed files with 247 additions and 0 deletions
247
docs-translations/fr-FR/tutorial/quick-start.md
Normal file
247
docs-translations/fr-FR/tutorial/quick-start.md
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
# 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
|
||||
Loading…
Reference in a new issue