        Electron
 


     ,     .     :           Windows, macOS  Linux,      .

      Electron,   Chromium      Node.js     API  .     ,       (IPC).

   ,      JavaScript,        npm.  HTML  CSS       .        ,         .





 

        Electron








1.1.    

           .  ,   Microsoft Windows, Apple macOS       Linux,     ,      (API).       (desktop applications)           ,    ,        .

       .        ,        -          .              - .

1.2.  Electron:    

 Electron        ,    GitHub     Atom. Electron      (Graphical User Interface, GUI)    -.

       :

HTML (HyperText Markup Language) -   .        (,  , ).

CSS (Cascading Style Sheets) -   .    : , ,    .

JavaScript -   .   ,   (,  )   .

            -,       (   ) .

1.3.  : Chromium  Node.js

 Electron           .

Chromium.    -    ,   Google.   Electron  Chromium    .     () HTML-,  CSS-         .  ,   Electron-    .

Node.js.    JavaScript-,    V8 ( ,    Chromium),     .   Node.js      ,  ,       .  Electron Node.js     (backend) ,   API       .

           (JavaScript)    ,       .

1.4.  :  (Main)   (Renderer) 

     Electron   ,     -.         .

  (Main Process).    .     Electron     .     Node.js      ,     ( ),          (, , ).       ,       main   package.json.

  (Renderer Process).          ( BrowserWindow).       ,   .        (DOM)              .          Node.js API        -.

          (Inter-Process Communication, IPC),       2.

1.5.     

   ,    ,       :

 : Windows 10/11 (64-bit), macOS 12  ,    Linux (, Ubuntu 20.04 LTS  ).

Node.js  npm. Node.js -   , npm (Node Package Manager) -      .     LTS (Long-Term Support).         :

node -v

npm -v

       .

   (IDE).   Visual Studio Code.      Electron,   ,    Git     JavaScript,       .




 1.     


             Electron.     -   Node.js      .

1.1.       npm

            .        electron-guide-app.

        :

mkdir electron-guide-app

cd electron-guide-app

:  mkdir (make directory)   ,  cd (change directory)     ,   .

      npm.      package.json.

npm init -y

 : npm (Node Package Manager) -     .  package.json      JSON (JavaScript Object Notation),    : , , ,     .  -y (yes)      ,      .

   package.json:

{

"name": "electron-guide-app",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC"

}

1.2.   Electron    

  Electron         npm     .

npm install --save-dev electron

:  npm install (  npm i)  .  --save-dev ( -D)   ,  Electron  dev- (dependency for development).  ,         ,         ,     .        node_modules,   Electron,   package.json   devDependencies    .

1.3.   :  main.js

    ,    1.4 ,   ,    (Main) .     main.js   .

  main.js:

//     API Electron

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

const path = require('node:path');



//    

function createWindow () {

//   

const win = new BrowserWindow({

width: 800,

height: 600

});



//   HTML-   

win.loadFile('index.html');

}



//   

//  app.whenReady()  Promise,  ,

//  Electron     BrowserWindow

app.whenReady().then(() => {

createWindow();



//  macOS       

app.on('activate', () => {

if (BrowserWindow.getAllWindows().length === 0) {

createWindow();

}

});

});



//   ,     ( Windows  Linux)

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

if (process.platform !== 'darwin') {

app.quit();

}

});

 :

require('electron') -   .   { app, BrowserWindow }      .

new BrowserWindow() -  .     .

win.loadFile() - ,     HTML-.

app.whenReady() -  , ,  API Electron    .

  app.on('window-all-closed')  app.on('activate')        .

1.4.   package.json




  .


   .

   ,     (https://www.litres.ru/book/georgiy-dimitriadi/prakticheskoe-rukovodstvo-po-sozdaniiu-prilozhenii-na-o-74611928/)  .

      Visa, MasterCard, Maestro,    ,   ,     ,  PayPal, WebMoney, ., QIWI ,       .


