👩🏾‍🎤 👨🏽‍🔧 🎃 Menulis Aplikasi Grafis di Electron JS (Mulai: Membuat Jendela) 🙆🏼 👨🏻‍🚀 🐢

Salam pembuka! Jika Anda pergi ke artikel ini, kemungkinan besar Anda sangat enggan untuk masuk ke dokumentasi resmi (dan sangat sia-sia. Itu ditulis secara rinci dan memiliki terjemahan ke dalam bahasa Rusia) dan Anda datang untuk solusi sederhana untuk masalah Anda - menulis aplikasi lintas platform untuk komputer hanya menggunakan teknologi Web. Saya menyarankan untuk tidak menunda dan segera memulai. Tetapi karena ini adalah artikel pertama, saya pikir perlu diceritakan secara singkat tentang apa itu Electron JS dan untuk apa itu.

gambar

Dokumentasi resmi mengatakan:

Jika Anda bisa membuat website, maka Anda bisa membuat aplikasi desktop. Electron adalah kerangka kerja untuk membangun aplikasi asli dengan teknologi web seperti JavaScript, HTML, dan CSS. Ini menangani bagian-bagian yang sulit, sehingga Anda dapat fokus pada elemen utama aplikasi Anda.

Aplikasi yang dibuat dengan Electron adalah situs web biasa yang dijalankan melalui browser web Chromium yang telah terpasang sebelumnya. Selain standar API HTML5 klasik, dimungkinkan untuk menerapkan seluruh daftar modul Node.js dan fitur Electron yang unik. Modul layanan menyediakan akses ke OS.

Ya, pada awalnya, alangkah baiknya jika Anda membiasakan diri dengan cara situs web dibuat. Saya tidak akan fokus pada detail kode HTML dan 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. . . :

gambar

, . , , , Web , .

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

Menulis Aplikasi Grafis di Electron JS (Mulai: Membuat Jendela)

More articles: