📞 🕢 🈳 Electron JSでグラフィカルアプリケーションを作成する（開始：ウィンドウの作成） 😾 👩🏻‍🏭 👾

こんにちは！この記事にアクセスした場合、おそらく公式ドキュメントにアクセスすることを非常に嫌がり（そして非常に無駄です。詳細に書かれており、ロシア語に翻訳されています）、問題の簡単な解決策を求めました。コンピュータ用のクロスプラットフォームアプリケーションを作成することです。 Webテクノロジーのみを使用します。遅らせずにすぐに始めることをお勧めします。しかし、これは最初の記事なので、ElectronJSとは何かとその目的について簡単に説明する価値があると思います。

公式文書によると：

あなたがウェブサイトを作ることができれば、あなたはデスクトップアプリケーションを作ることができます。Electronは、JavaScript、HTML、CSSなどのWebテクノロジーを使用してネイティブアプリケーションを構築するためのフレームワークです。難しい部分を処理するので、アプリケーションの主要な要素に集中できます。

Electronで構築されたアプリケーションは、プリインストールされたChromiumWebブラウザーで起動される通常のWebサイトです。従来のHTML5API標準に加えて、Node.jsモジュールのリスト全体と独自のElectron機能を適用することができます。サービスモジュールはOSへのアクセスを提供します。

はい、最初はWebサイトの作成方法をよく理解しておくとよいでしょう。HTMLおよび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`, ( ) , .

Electron JSでグラフィカルアプリケーションを作成する（開始：ウィンドウの作成）

More articles: