اولین اپلیکیشن خود را با Electron بنویسید

آموزش ساخت اپلیکیشن با Electron

Electron شما را قادر می سازد تا با JavaScript خالص، برنامه های دسکتاپ را ایجاد کنید،بوسیله تامین یک زمان اجرا با APIهای غنی بومی. میتوانید این را به عنوان زمان اجرای Node.js گوناگون ، که به جای صفحات وب روی برنامه های دسکتاپ تمرکز دارد، ببینید .
این موضوع به این معنی نیست که Electron یک JavaScript متصل به کتابخانه GUI است. درعوض الکترون از صفحات وب به عنوان GUI خود استفاده می کند. پس شما می توانید آن را به عنوان یک حداقل مروگر Chromium که توسط JavaScript کنترل شده هم ببینید.
نکته: این مثال منبعی دردسترس است که شما میتوانید به سرعت آن را دانلود و اجرا کنید.
تا جایی که به توسعه مربوط می شود، یک اپلیکیشن Electron در اصل یک اپلیکیشن Node.js است. نقطه شروع یک package.json است که با مدل Node.js یکسان است. پایه ای ترین (ساده ترین) اپلیکیشن Electron دارای ساختار زیر است:

your-app/
  ├── package.json
  ├── main.js
  └── index.html

یک پوشه خالی جدید برای اپلیکیشن Electron خود بسازید و فرمان سرویس دهنده خود را باز کنید و npm init را از همان پوشه اجرا کنید.

npm init

Npm شما را از طریق ساخت یک فایل package.json پایه ای (ساده) راهنمایی می کند. دستور العمل تعیین شده توسط فیلد اصلی ، دستور العمل اپلیکیشن شماست که فرایند اصلی را اجرا خواهد کرد. نمونه زیر می تواند مثالی برای package.json شما باشد:

{
    "name": "your-app",
    "version": "0.1.0",
    "main": "main.js"
  }

نکته: اگر فیلد اصلی در package.json موجود نیست، Electron تلاش می کند تا یک index.js بارگذاری کند (مثل کاری که Node.js انجام می دهد). درواقع اگر یک اپلیکیشن Node ساده باشد، می توانید یک دستورالعمل آغازین که دستور node را برای اجرای بسته موجود هدایت می کند، اضافه کنید.

{
    "name": "your-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
      "start": "node ."
    }
  }

تبدیل این برنامه Node به یک برنامه Electron بسیار ساده است. ما فقط زمان اجرای node را جایگزین زمان اجرای Electron میکنیم.

{
    "name": "your-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
      "start": "electron ."
    }
  }

نصب Electron

در این مورد، شما نیاز دارید electron خود را نصب کند. روش توصیه شده برای این کار، نصب آن به عنوان یک وابستگی بسط داده شده در اپلیکیشن خودتان است که به شما اجازه می دهد با چند اپلیکیشن از ورژن های مختلف Electron کار کنید. به این منظور، دستور زیر را از راهنمای اپلیکیشن خود اجرا کنید:

npm install --save-dev electron

توسعه Electron در Nutshell

اپلیکیشن های Electron با استفاده از همان اصول و روش های توسعه Node.js ، بسط داده می شوند. همه APIها و ویژگی های یافت شده در Electron از طریق ماژول Electron قابل دسترسی هستند که می تواند مانند ماژول های دیگر Node.js مورد نیاز باشد.

const electron = require('electron')

ماژول electron ویژگی ها را در فضای اسمی (namespace) قرار می دهد. به عنوان مثال چرخه حیات اپلیکیشن از طریق electron.app مدیریت شده، ویندوز می تواند با استفاده از electron.BrowserWindow ساخته شود.
یک فایل ساده main.js می تواند منتظر بماند تا اپلیکیشن آماده شود و ویندوز باز شود.

const {app, BrowserWindow} = require('electron')
  
  function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({width: 800, height: 600})
  
    // and load the index.html of the app.
    win.loadFile('index.html')
  }
  
  app.on('ready', createWindow)

main.js باید پنجره ها را ایجاد کند و تمام رویدادهای سیستم را که ممکن است برنامه شما با آن روبرو شود را اداره کند. ورژن کاملتر مثال بالا می تواند ابزار توسعه دهنده را باز کند، بسته شدن ویندوز را اداره کرده یا اگر کاربر روی ایکن برنامه در dock کلیک کند، ویندوزها را در macOS بازسازی کند.

const {app, BrowserWindow} = require('electron')
  
  // Keep a global reference of the window object, if you don't, the window will
  // be closed automatically when the JavaScript object is garbage collected.
  let win
  
  function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({width: 800, height: 600})
  
    // and load the index.html of the app.
    win.loadFile('index.html')
  
    // Open the DevTools.
    win.webContents.openDevTools()
  
    // Emitted when the window is closed.
    win.on('closed', () => {
      // Dereference the window object, usually you would store windows
      // in an array if your app supports multi windows, this is the time
      // when you should delete the corresponding element.
      win = null
    })
  }
  
  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', createWindow)
  
  // Quit when all windows are closed.
  app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  
  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
      createWindow()
    }
  })
  
  // In this file you can include the rest of your app's specific main process
  // code. You can also put them in separate files and require them here.

سرانجام، index.html صفحه وبی است که می خواهید به نمایش بگذارید:

code

اپلیکیشن خود را اجرا کنید

وقتی فایل های ابتدایی main.js, index.html و package.json خود را ایجاد کردید، میتوانید برنامه خود را با اجرای npm از دایرکتوری برنامه، امتحان کنید.
این مثال را امتحان کنید
این کد را با استفاده از electron/electron-quick-start اجرا کنید:
نکته: این Git ضروری را اجرا کنید:

# Clone the repository
  $ git clone https://github.com/electron/electron-quick-start
  # Go into the repository
  $ cd electron-quick-start
  # Install dependencies
  $ npm install
  # Run the app
  $ npm start
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5٫00 out of 5)
Loading...
counter customizable free hit