Clever Geek Handbook

كتابة تطبيق رسومي في Electron JS (ابدأ: إنشاء نافذة)

تحية طيبة! إذا انتقلت إلى هذه المقالة ، فعلى الأرجح أنك متردد للغاية في الدخول في الوثائق الرسمية (وبلا جدوى. إنه مكتوب بالتفصيل وله ترجمة إلى اللغة الروسية) وقد أتيت لحل بسيط لمشكلتك - كتابة تطبيق عبر الأنظمة الأساسية لجهاز الكمبيوتر باستخدام تقنيات الويب فقط. أقترح عدم التأخير والبدء على الفور. ولكن نظرًا لأن هذه هي المقالة الأولى ، أعتقد أنه من الجدير أن نخبر بإيجاز ما هو Electron JS وما هو الغرض منه.



صورة



تقول الوثائق الرسمية :



إذا كان بإمكانك إنشاء موقع ويب ، فيمكنك إنشاء تطبيق سطح مكتب. Electron هو إطار عمل لبناء تطبيقات أصلية باستخدام تقنيات الويب مثل JavaScript و HTML و CSS. إنه يعتني بالأجزاء الصعبة بحيث يمكنك التركيز على العناصر الرئيسية للتطبيق الخاص بك.

التطبيقات التي تم إنشاؤها باستخدام Electron هي مواقع ويب عادية يتم تشغيلها من خلال متصفح الويب Chromium المثبت مسبقًا. بالإضافة إلى معايير HTML5 API الكلاسيكية ، من الممكن تطبيق القائمة الكاملة لوحدات Node.js وميزات Electron الفريدة. توفر وحدات الخدمة الوصول إلى نظام التشغيل.



نعم ، في البداية سيكون من الجيد أن تتعرف على كيفية إنشاء مواقع الويب. لن أركز على تفاصيل كود 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();
});


, , :



  1. "width" "height" . 700 500 .
  2. pathname: path.join(__dirname, 'index.html') , "index.js" , "index.html"
  3. - 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`, ( ) , .



.



More articles:


All Articles