الکترون جی اس توسط گیت هاب طراحی و ساخته شد و به برنامه نویسان جاوااسکریپت این امکان را می دهد تا برنامه های دسکتاپ را با استفاده از html css javascript تولید کنند .

برنامه های معروف بسیاری از جمله ویرایشگر اتم , واتساپ دسکتاپ , مایکروسافت ویژوال استودیو کد , اسپاتیفای و دیسکورد با استفاده از این فریم ورک قدرتمند جاوااسکریپت طراحی و ساخته شده اند .


الکترون برای ایجاد این اپلیکیشن‌ها از موتور مرورگر کرومیوم و نودجی‌اس قدرت می‌گیرد. همچنین در الکترون شما قابلیت دسترسی به APIهای کاربردی مانند IPC یا Inter-process Communication Module را دارید.


ساختار یک اپلیکیشن الکترون

ساختار کلی یک اپلیکیشن ساده با الکترون شبیه به زیر است .

.
├── index.html
├── index.js
├── node_modules
├── package-lock.json
└── package.json
 
1 directory, 4 files


با توجه به آن چه در بالا است برای یک اپلیکیشن بسیار ساده با الکترون به 4 فایل و 1 دایرکتوری نیاز خواهیم داشت .


با دستور npm install می توانید npm را در محل پروژه نصب کرده سپس npm i electron را بزنید تا پکیج الکترون نصب شود .


پس از این فایل package.json شبیه زیر خواهد شد ( ممکن است تفاوت های جزئی داشته باشد )

{
  "name": "electron-blog-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^20.0.2"
  }
}


هر اپلیکیشن الکترون از دو بخش فرانت اند ( Frond-End ) و بک اند ( Back-End ) تشکیل می شود.


کد های زیر را در فایل index.js قرار دهید .

const { app, BrowserWindow } = require("electron");
 
const createWindow = () => {
  const win = new BrowserWindow({
    width: 400,
    height: 400,
  });
  win.loadFile("./index.html");
};
 
app.whenReady().then(() => {
  createWindow();
});

در بالا ماژول الکترون به پروژه اضافه شده و سپس یک پنجره با طول و عرض 400 پیکسل ساخته شده است و در این پنجره فایل index.html لود شده است . و در انتها نوشته شده که هنگامی که اپلیکیشن آماده شد پنجره ساخته شود.


کد های زیر را در بخش index.html قراردهید .

<!DOCTYPE html>
<html>
  <head>
    <title>This is my first Electron app!</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  </head>
  <body>
    <h1>I made a Desktop App!</h1>
  </body>
</html>



اجرا اپلیکیشن

برای اجرای اپلیکیشن ساخته شده کافی است خط هفتم کد های زیر را به package.json اضافه کنید .


{
  "name": "electron-blog-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .", // this is new
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^20.0.2"
  }
}

سپس کافی است از طریق npm start برنامه خود را اجرا کنید .



نظر شما چیست با ما به اشتراک بگذارید !