👨🏼‍⚖️ ✌🏽 👨🏾‍🚀 Ecriture d'une application GUI dans Electron JS (Démarrer: Création d'une fenêtre) 👡 🏪 🕞

Salutations! Si vous êtes allé à cet article, vous êtes probablement extrêmement réticent à entrer dans la documentation officielle (et très en vain. Elle est écrite en détail et a une traduction en russe) et vous êtes venu pour une solution simple à votre problème - écrire une application multiplateforme pour un ordinateur en utilisant uniquement les technologies Web. Je suggère de ne pas retarder et de commencer tout de suite. Mais comme il s'agit du premier article, je pense qu'il vaut la peine de dire en un mot ce qu'est Electron JS et à quoi il sert.

La documentation officielle dit:

Si vous pouvez créer un site Web, vous pouvez créer une application de bureau. Electron est un framework pour la création d'applications natives avec des technologies Web telles que JavaScript, HTML et CSS. Il s'occupe des parties difficiles afin que vous puissiez vous concentrer sur les principaux éléments de votre application.

Les applications créées avec Electron sont des sites Web réguliers qui sont lancés avec le navigateur Web Chromium préinstallé. En plus des standards API HTML5 classiques, il est possible d'appliquer la liste complète des modules Node.js et des fonctionnalités Electron uniques. Les modules de service permettent d'accéder au système d'exploitation.

Oui, au début, ce serait bien pour vous de vous familiariser avec la création de sites Web. Je ne me concentrerai pas sur les détails du code HTML et CSS.

- , Electron JS. : Skype, Visual Studio Code, Slack .

.

. Visual Studio Code.

,

npm init

( , ).

npm Node.JS

Node.JS npm init , Node.JS . Node.JS . LTS . MacOS Windows , "

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

"start": "electron ."

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

, . . Electron JS. Electron :

npm install -g electron

npm install electron -save

— package-lock.json — node_modules. . , . package.json :

  "main": "index.js"

, "index.js". :

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

let win;

function createWindow() {
    win = new BrowserWindow({
        width: 700,
        height: 500,
    });

    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    win.webContents.openDevTools();

    win.on('closed', () => {
        win = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    app.quit();
});

, , :

"width" "height" . 700 500 .
pathname: path.join(__dirname, 'index.html') , "index.js" , "index.html"
- Chromium win.webContents.openDevTools(); Chrome DevTools.

( c ).

index.html <body> , -, Hello world:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

- . :

npm start

, start package.json. . . :

, . , , , Web , .

P.S. , , , Electron, "" Electron`, ( ) , .

Ecriture d'une application GUI dans Electron JS (Démarrer: Création d'une fenêtre)

More articles: