چگونه از electron برای ایجاد یک برنامه استفاده کنیم

پنج‌شنبه، 11 شهریور 1395

اتفاقات زیادی تو زندگی میوفته که باعث میشه آدم تصمیماتش رو تغییر بده، این پست و کلا پست جدید تو بلاگ قرار نبود تا تموم شدن برنامه‌ای که میخوام بسازم نوشته بشه، پیش خودم تصمیم گرفته بودم که پست جدید رو بعد از تموم شدن darling مینویسم. (دارلینگ اسم برنامه‌ای هست که قصد دارم بعنوان واسط کاربری مدیریتی برای hexo بنویسم و در حال حاضر فقط بخش‌هاییش رو پیاده سازی کردم و نیازمند بسی تغییره)
البته موضوع پست چندان بیربط به این برنامه نیست و اینکه این پست رو هم دارم با نسخه خیلی اولیه darling مینویسم که فعلا نقشnotepad رو داره :) توی این پست قراره نحوه راه اندازی الکترون و اجرای یک کد خیلی کوچک توی اون رو با هم ببینیم.
بدون هیچ حرف دیگه‌ای بریم سراغ کارامون

ایجاد پروژه جدید با nodejs

برای اینکه یک پروژه جدید با nodejs بسازیم، ترمینال خودتون رو باز کنید و دستور زیر رو وارد کنید. با اجرای این فرمان از شما چند تا سوال میپرسه که اسم پروژه هست و ورژن چنده و لایسنس چی هست که پاسخ اینها رو شما بهتر از من میدونیم. (من هنوز علاقه‌مندم یک مرجع خوب برای توضیح فارسی لایسنس‌ها پیدا کنم)
تنها سوالی که اهمیت بالایی داره entry point هست، که مشخص میکنه کدوم فایل شما حاوی کد‌های اجاری برنامه است. که مقدار پیش فرض آن index.js است. اینجا فرض ما هم همین مقدار پیشفرض خواهد بود.

1
npm init

بعد از اتمام کار فرمام درون دایرکتوری فعلا یک فایل package.json می‌بینید که اگه بازش کنید پاسخهای خودتون رو در اون میبینید.

راه‌اندازی electron

الکترون برنامه‌ای هست که امکان ایجاد window توی سیستم‌عامل و مدیریت و اون‌هارو به ما میده، و با استفاده از موتور وب chromium امکان رندر کردن HTML, CSS و اجرای JS رو توی اون پنجره فراهم میکنه. اگه بخواین خودتون سورت الکترون رو دانلود وbuild کنید، به سه چهار گیگ فضا و مقدار زیادی وقت احتیاج دارید تا دست آخر بتونید فایل اجرایی برای سیستم عامل خودتون بسازید، برای اینکه ما نه اینقدر فضا رو هاردمون داریم و نه حوصله و وقت build کردن هنگام گشترس برنامه خودمون میتونیم از بیلد‌های آماده ای که وجود داره استفاده کنیم، پکیج electron-prebuild دقیقا چیزی هست که میخوایم. این پکیج بیلد‌های آماده برای سیستم‌عامل‌های مختلف رو داره و تنها کافیه این رو نصب کنیم تا فایل اجرایی الکترون رو برای ما دانلود کنه.

1
npm install electron-prebuilt --save-dev

خب بعد از نصب این پکیج برای استفاده از اون و ایجاد یک پنجره جدید لازمه بریم سراغ entry point خودمون یعنی همون فایل index.js و چند کلامی باهاش اختلات کنیم. کد زیر محتویات فایل index.js رو نشون میده.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
// 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 mainWindow
function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})
  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/renderer/index.html`)
  // Open the DevTools.
  mainWindow.webContents.openDevTools()
  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // 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.
    mainWindow = 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', function () {
  // On OS X 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', function () {
  // On OS X 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 (mainWindow === 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.

مهمترین بخش در این کد تابع createWindow هست که وظیفه خطیر ایجاد پنجره جدید رو بر عهده داره. این تابع وقتی فراخوانی میشه که الکترون به وضعیت آماده رسیده باشه (سطر ۳۳).
در تابع createWindow در سطر۱۳ یک پنجره جدید ساخته شده و اندازه اون مشخص میشه، سپس در سطر ۱۶ مسیر فایل html که قراره درون این پنجره لود بشه تعیین میشه. پس با توجه به کد زیر ما باید فایل index.html درون دایرکتوری renderer رو ایجاد کنیم.

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

خب کار با الکترون تمومه و میتونیم برای اجرای برنامه دستور زیر رو اجرا کنیم.

1
./node_modules/.bin/electron .

Desktop files

برای سهولت توی اجرا درون فایل package.json در بخش scripts میتونیم یا میانبر برای این دستور ایجاد کنید. چیزی مشابه زیر

1
2
3
"scripts": {
  "start": "ENVIRONMENT=DEV ./node_modules/.bin/electron ."
 },

بعد از همه این تنظیمات محتویات package.json چیزی شبیه زیر هست

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "electron-hello-world",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "ENVIRONMENT=DEV ./node_modules/.bin/electron ."
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/farnabaz/electron-hello-world.git"
  },
  "author": "farnabaz@gmail.com",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/farnabaz/electron-hello-world/issues"
  },
  "homepage": "https://github.com/farnabaz/electron-hello-world#readme",
  "devDependencies": {
    "electron-prebuilt": "^1.2.8"
  }
}

کار همینجا تمام است و شما میتوانید به راحتی اسکریپت‌های لازم برای برنامه خود را درون renderer/index.html فراخوانی و اجرا کنید. همچنین می‌توانید درون پنجره از قدرت nodejs نیز بهره ببرید برای مثال در اگر کد‌های زیر را به فایل renderer/index.html خود اضافه کنید میتوانید لیست فایل‌ها وفولدر‌های دسکتاپ خود را ببینید.

1
2
3
4
5
6
7
8
9
10
11
<pre id="tree">
</pre>
<script>
   const os = require('os');
   const fs = require('fs');
   const path = require('path');
   var desktopPath = path.join(os.homedir(), 'Desktop');
      fs.readdir(desktopPath, function(err, files){
      document.getElementById('tree').innerText = files.join("\n")
   })
</script>

بعد از تغییر فایل روی پنجره برنامه خود کلیک کنید و دکمه ctrl+R (cmd+R) را فشار دهید تا صفحه ریولد شود.
Desktop files

  • قبل از نوشتن این مطلب قرار بود نحوه استفاده React و Webpack رو هم توی این مطلب توضیح بدم، ولی بعد از نوشتن بخش الکترون منصرف شدم، اگه عمری باقی بود در آینده اون رو هم در مطلبی مینویسم
  • کدهای این مطلب رو میتونید توی این ریپوی گیتهاب پیدا کنید.

Tags:

برگه‌ها